您的想法是正确的，Backbone 应该让您使用相同的基本高级工作流程概览轻松完成工作。请注意，您仍将使用 jQuery 来实现此功能 - 您将通过 Backbone 类型的组织方面来实现。
您需要几个关键项目，其中大部分您已经提到过：
- 用于协调 HTML 元素与 Javascript 代码的主干视图
- 一个主干模型，用于存储用户输入到 HTML 元素中的所有数据
- 一个后端服务器，可以通过来自 jQuery 的 AJAX 请求处理 RESTful JSON 调用
我认为您唯一缺少的是模型上有一个save 方法，它包含了调用后端服务器上的创建/更新路由的所有逻辑。该模型还有一个delete 方法来处理从服务器删除。
作为一个非常简单的示例，这是一个将 HTML 模板呈现到屏幕上的表单，将用户输入收集到模型中，然后将其保存到服务器。
一个 HTML 模板：
<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>
运行它的代码：
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);
这将为您提供一个将新模型保存回服务器的表单的快速入门。
您的服务器需要做几件事：
- 返回有效的 HTTP 响应代码（200 或其他表示一切正常的响应）
- 返回发送到服务器的 JSON，包括服务器分配给模型的任何数据，例如
id 字段。
您的服务器执行这些操作并在响应中包含id 字段非常重要。如果没有来自服务器的 id 字段，当您再次调用 save 时，您的模型将永远无法自我更新。它只会尝试再次在服务器上创建一个新实例。
Backbone 使用模型的id 属性来确定在将数据推送到后端时是否应该创建或更新模型。创建新模型和保存模型的区别仅在于id 属性。无论是新模型还是编辑模型，您都可以在模型上调用 save。
删除的工作方式相同 - 您只需在模型上调用 destroy，它会回调服务器以进行销毁。对于某些具有“删除”链接或按钮的 HTML，您将附加到该 HTML 元素的单击事件，就像我为“保存”按钮显示的一样。然后在删除点击的回调方法中，调用this.model.destroy()并传递任何你想要的参数，比如成功和错误回调。
请注意，我也在模型中添加了urlRoot。如果模型不是集合的一部分，则模型需要此函数或 url 函数。如果模型是集合的一部分，则集合必须指定 url。
希望对你有帮助。