将我的旧工作流程调整为 Backbone

Question

我开始构建一个新的应用程序，我想使用 Backbone 作为我的框架。以下是该应用程序（以及大多数应用程序）遵循的基本工作流程。

与 Backbone 一起使用的正确/最佳模型是什么？

老方法
用户导航到页面。
选择“创建新小部件”
用户会看到一个充满输入的表单
此时，我可能会获取输入的值（通过基本验证后），将它们包装起来并通过 ajax 请求将它们发送到服务器
请求返回“OK”，用户被带到其他地方（这一步并不完全重要）

一些基本的伪代码

// 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 way
使用与上面相同的示例；我假设我有一个用户信息模型和一个显示输入的视图。然而，处理对 Web 服务的实际调用是我感到困惑的事情之一。这需要去哪里？在模型或视图中单击某个“Go”按钮？

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

也许还有这些 UserInformation 模型的集合？
UserInformations = Backbone.Collection.extend({ model: Model.UserInformation' });

所以我要问的底线是......
实现此功能的最佳方法是什么？
实际执行 CRUD 的正确方法是什么？在哪里放置对删除/更新/创建/等的实际调用？

Answer 1

您有正确的想法，Backbone 应该让您可以使用相同的基本工作流程高级概述轻松完成工作。请注意，您仍将使用 jQuery 来实现此功能 - 您只需通过 Backbone 类型的组织方面来完成此操作。

您需要几个关键项目，其中大部分您已经提到过：

• 用于协调 HTML 元素与 Javascript 代码的骨干视图
• 存储用户输入到 HTML 中的所有数据的骨干模型elements
• 一个后端服务器，可以通过来自 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。

我希望这有帮助。

Answer 2

如果视图的“el”是表单标签，那么您可能可以使用内置事件对象来绑定要提交的函数，但如果视图的根是其他东西，那么您需要附加单击渲染函数中的处理程序。