Điều chỉnh luồng công việc cũ của tôi tới Backbone

Question

Tôi bắt đầu xây dựng một ứng dụng mới và tôi muốn sử dụng Backbone làm khung công tác của mình. Dưới đây là một quy trình cơ bản mà điều này (và hầu hết các ứng dụng) làm theo.

Mô hình chính xác/tốt nhất để sử dụng với Backbone là gì?

Cách cũ
Người dùng điều hướng đến một trang.
Chọn "Tạo tiện ích con mới"
Người dùng được hiển thị với biểu mẫu có đầu vào
Tại thời điểm này, tôi có thể lấy các giá trị đã nhập (sau khi vượt qua xác thực cơ bản), gói chúng và gửi chúng đến máy chủ qua ajax yêu cầu
yêu cầu trở lại là "OK" và người dùng được thực hiện ở một nơi khác (bước này không hoàn toàn quan trọng)

Một số giả mã cơ bản

// Grab values 
var userName = $('.UserName').val(), 
    dateOfBirth = $('.DateOfBirth').val(); 
    ... 
    ... 
    ... 

$.ajax({ 
    url: "/Webservices/ProcessStuff", 
    success: function(result){ 
    if (result) { 
    // Render something or doing something else 
    } else { 
    // Error message 
    } 
    }, 
    error: function() { 
    // Error message 
    } 
}); 

Backbone cách
Sử dụng cùng ví dụ như trên; Tôi cho rằng tôi sẽ có một mô hình cho thông tin người dùng và một khung nhìn để hiển thị các đầu vào. Tuy nhiên, việc xử lý cuộc gọi thực tế đến dịch vụ web là một trong những điều tôi đang nhầm lẫn. Trường hợp này cần phải đi đâu? Trong mô hình hoặc trong chế độ xem click của một số nút "Tìm"?

Model.UserInformation = Backbone.Model.extend({ username: null, dateOfBirth: null });

Có lẽ cũng có một bộ sưu tập các mô hình này UserInformation?
UserInformations = Backbone.Collection.extend({ model: Model.UserInformation' });

dòng Vì vậy, dưới những gì tôi đang hỏi là ...
cách tốt nhất để đạt được chức năng này là gì?
Cách thích hợp để thực sự thực hiện CRUD là gì? Nơi để thực hiện cuộc gọi thực tế để xóa/cập nhật/tạo/etc?

Answer 1

Bạn có ý tưởng đúng và Backbone sẽ giúp bạn dễ dàng hoàn thành công việc bằng cách sử dụng cùng một tổng quan cấp cao cơ bản về quy trình làm việc của bạn. Lưu ý rằng bạn vẫn sẽ sử dụng jQuery cho chức năng này - bạn sẽ chỉ làm việc đó thông qua các khía cạnh tổ chức của các loại Backbone.

Có một vài hạng mục quan trọng mà bạn sẽ muốn tại chỗ, hầu hết trong số đó bạn đã đề cập:

• Một xương sống Xem phối hợp các yếu tố HTML với mã Javascript của bạn
• Một xương sống mẫu để lưu trữ tất cả các dữ liệu mà người dùng nhập vào các phần tử HTML
• Một máy chủ back-end có thể xử lý các cuộc gọi JSON RESTful qua yêu cầu AJAX từ jQuery

tôi nghĩ rằng chỉ có điều bạn đang thiếu là mô hình có một phương pháp save trên nó, mà kết thúc tốt đẹp tất cả các logic để gọi tạo/cập nhật các tuyến đường trên máy chủ back-end của bạn.Mô hình cũng có phương thức delete để xử lý việc xóa khỏi máy chủ.

Là một ví dụ rất đơn giản, đây là biểu mẫu hiển thị mẫu HTML trên màn hình, thu thập thông tin nhập của người dùng vào mô hình và sau đó lưu nó vào máy chủ.

Một HTML template:

<script id="myTemplate" type="text/x-jquery-tmpl"> 
    First name: <input id="first_name"><br/> 
    Last Name: <input id="last_name"><br/> 
    <button id="save">Save!</button> 
</script> 

mã để chạy này:

MyModel = Backbone.Model.extend({ 
    urlRoot: "/myModel" 
}); 

MyView = Backbone.View.extend({ 
    template: "#myTemplate", 

    events: { 
    "change #first_name": "setFirstName", 
    "change #last_name: "setLastName", 
    "click #save": "save" 
    }, 

    initialize: function(){ 
    _.bindAll(this, "saveSuccess", "saveError"); 
    }, 

    setFirstName: function(e){ 
    var val = $(e.currentTarget).val(); 
    this.model.set({first_name: val}); 
    }, 

    setLastName: function(e){ 
    var val = $(e.currentTarget).val(); 
    this.model.set({last_name: val}); 
    }, 

    save: function(e){ 
    e.preventDefault(); // prevent the button click from posting back to the server 
    this.model.save(null, {success: this.saveSuccess, error: this.saveError); 
    }, 

    saveSuccess: function(model, response){ 
    // do things here after a successful save to the server 
    }, 

    saveError: function(model, response){ 
    // do things here after a failed save to the server 
    }, 

    render: function(){ 
    var html = $(this.template).tmpl(); 
    $(el).html(html); 
    } 
}); 

myModel = new MyModel(); 
myView = new MyView({model: myModel}); 
myView.render(); 
$("#someDivOnMyPage").html(myView.el); 

này sẽ cung cấp cho bạn một sự khởi đầu nhanh chóng cho một hình thức mà tiết kiệm một mô hình mới trở lại máy chủ.

Có một vài điều máy chủ của bạn cần phải làm:

• Return một mã phản hồi HTTP hợp lệ (200 hoặc một số phản ứng khác nói rằng tất cả mọi thứ là "ok")
• Return JSON đó là được gửi tới máy chủ, bao gồm mọi dữ liệu mà máy chủ được gán cho mô hình chẳng hạn như trường id.

Điều quan trọng là máy chủ của bạn thực hiện những việc này và bao gồm trường id trong phản hồi. Nếu không có trường id từ máy chủ, mô hình của bạn sẽ không bao giờ có thể tự cập nhật khi bạn gọi lại save. Nó sẽ chỉ cố gắng tạo một cá thể mới trên máy chủ một lần nữa.

Đường trục sử dụng thuộc tính id của một mô hình để xác định xem nó có nên tạo hoặc cập nhật mô hình khi đẩy dữ liệu vào đầu sau không. Sự khác biệt giữa việc tạo mô hình mới và lưu mô hình chỉ là thuộc tính id. Bạn gọi save trên mô hình cho dù đó là mô hình mới hoặc mô hình đã chỉnh sửa.

Xóa cũng hoạt động theo cách tương tự - bạn chỉ cần gọi destroy trên mô hình và thực hiện cuộc gọi lại cho máy chủ để thực hiện việc hủy. Với một số HTML có liên kết hoặc nút "xóa", bạn sẽ đính kèm vào sự kiện nhấp chuột của phần tử HTML giống như tôi đã hiển thị cho nút "Lưu". Sau đó, trong phương thức gọi lại cho lần nhấp xóa, bạn sẽ gọi số this.model.destroy() và chuyển bất kỳ thông số nào bạn muốn, chẳng hạn như gọi lại thành công và lỗi.

Lưu ý rằng tôi cũng bao gồm một số urlRoot trên mô hình. Điều này, hoặc một chức năng url là cần thiết trên một mô hình nếu mô hình không phải là một phần của một bộ sưu tập. Nếu mô hình là một phần của bộ sưu tập, bộ sưu tập phải chỉ định url.

Tôi hy vọng rằng sẽ giúp.

Answer 2

Nếu "el" của chế độ xem là thẻ biểu mẫu, thì bạn có thể sử dụng đối tượng sự kiện được tích hợp để ràng buộc hàm để gửi, nhưng nếu gốc của chế độ xem là thứ gì đó khác, thì bạn sẽ cần để đính kèm trình xử lý nhấp chuột vào hàm render.