使我的旧工作流程适应Backbone

Question

我开始构建一个新的应用程序,我想使用Backbone作为我的框架.以下是此(以及大多数应用)遵循的基本工作流程.

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

旧方式
用户导航到页面.
选择"创建新窗口小部件"
用户会
看到一个填充了输入的表单此时我可能会输入所输入的值(在通过基本验证之后),将它们打包并通过ajax请求将它们发送到服务器
请求返回为"确定"并且用户被带到其他地方(此步骤并不完全重要)

一些基本的伪代码

// 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方式
使用与上面相同的例子; 我假设我有一个用户信息模型和一个显示输入的视图.但是,处理对Web服务的实际调用是我感到困惑的事情之一.这需要去哪里？在模型中或click某些"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元素中的所有数据
• 一个后端服务器,可以通过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元素的click事件,就像我为"保存"按钮所示.然后在删除单击的回调方法中,您将调用this.model.destroy()并传递所需的任何参数,例如成功和错误回调.

请注意,我urlRoot也在模型中包含了一个.url如果模型不是集合的一部分,则需要在模型上使用此函数或函数.如果模型是集合的一部分,则集合必须指定url.

我希望有所帮助.