基于Backbone.js的JavaScript MVC示例程序(7)

3.4 增加User

左侧 User 列表上方添加了一个 "Add" 按钮,点击之后右侧的页面会显示一个增加 User 的表单,表单提交之后弹出一个提示框,左侧列表也会更新。如下图所示:

基于Backbone.js的JavaScript MVC示例程序(7)_第1张图片

4.html,新增了表单的模板和 "Add" 按钮:

 1 <!-- 增加User的表单 -->
 2 <script type="text/template" id="user-form-template">
 3     <h3>Add User</h3>
 4     <ul id="user-form" class="editing">
 5         <li>Username:<input type="text" name="username" /></li>
 6         <li>Password:<input type="password" name="password" /></li>
 7         <li>Email:<input type="text" name="email" /></li>
 8         <li>Phone:<input type="text" name="phone" /></li>
 9         <button id="add-submit">Submit</button>
10     </ul>
11 </script>
12 ......
13 <body>
14     <div id="main">
15         <div id="left">
16             <h3></h3>
17             <!-- 增加一个按钮,点击后显示增加User的表单 -->
18             <p><button id="add">Add</button></p>
19             <ul id="user-list"></ul>
20         </div>
21         <div id="right"></div>
22     </div>
23 </body>

mvc4.js

  1 $(document).ready(function() { 
  2     
  3     var User = Backbone.Model.extend({
  4     });
  5     
  6     var UserList = Backbone.Collection.extend({
  7         ... //不变
  8     });
  9     
 10     var UserItemView = Backbone.View.extend({
 11         ... //不变
 12     });
 13     
 14     var UserInfoView = Backbone.View.extend({
 15         ... //不变
 16     });
 17     
 18     var UserListView = Backbone.View.extend({
 19         el : $("#main"),
 20         userFormTemplate : _.template($("#user-form-template").html()), //新增,绑定模板
 21         events : {
 22               "click #add" : "displayUserForm", //新增
 23               "click #add-submit" : "submitUserForm", //新增
 24         },
 25         initialize : function() {
 26             this.userList = new UserList();
 27             this.userList.bind('add', this.addOne, this); //新增,每当userList中加一个User时,列表中会加一个条目
 28             this.userList.bind('reset', this.addAll, this);
 29             this.userList.bind('all', this.render, this); 
 30             this.userList.fetch({silent: true, success:function(collection, response){ 
 31                 if(response != null){
 32                     collection.reset(response.user);
 33                 }else{
 34                     userListView.render();
 35                 }
 36             }});
 37             this.displayUserForm(); //新增,加载页面的时候默认显示增加User的表单
 38         },
 39         render : function() {
 40             this.$("#left h3").html("Total Number:"+this.userList.length);
 41         },
 42         addOne : function(user) {
 43             var view = new UserItemView({model : user});
 44             this.$("#user-list").append(view.render().el);
 45         },
 46         addAll : function() { 
 47             this.userList.each(this.addOne);
 48         },
 49         displayUserForm : function() { //新增,显示增加用户的表单
 50             this.$("#right").html(this.userFormTemplate());
 51         },
 52         submitUserForm : function() { //新增,提交增加用户的表单
 53             var user  = new User({
 54                 "username":$("input[name='username']").val(),
 55                 "password":$("input[name='password']").val(),
 56                 "email":$("input[name='email']").val(),
 57                 "phone":$("input[name='phone']").val(),
 58             });
 59 
 60             /**** 注释一 报错:id is not defined *****
 61             this.userList.create(user);
 62             $("input[name='username']").val(""),
 63             $("input[name='password']").val(""),
 64             $("input[name='email']").val(""),
 65             $("input[name='phone']").val(""),
 66             alert("Add a user!");
 67             *****************************************/
 68             
 69             /************** 注释二 正确 *************/
 70             this.userList.create(user,{wait:true});
 71             $("input[name='username']").val(""),
 72             $("input[name='password']").val(""),
 73             $("input[name='email']").val(""),
 74             $("input[name='phone']").val(""),
 75             alert("Add a user!");
 76             /****************************************/
 77             
 78             /**** 注释三 报错:A "url" property or function must be specified ****
 79             user.save({success : function(){
 80                 $("input[name='username']").val(""),
 81                 $("input[name='password']").val(""),
 82                 $("input[name='email']").val(""),
 83                 $("input[name='phone']").val(""),
 84                 this.userList.add(user);
 85                 alert("Add a user!");
 86             }});
 87             **********************************************************************/
 88             
 89             /************** 注释四 正确 *************
 90             var ul = this.userList;
 91             user.urlRoot = "/backbone-sample/rest/user";
 92             user.save({},{success : function(){
 93                 $("input[name='username']").val(""),
 94                 $("input[name='password']").val(""),
 95                 $("input[name='email']").val(""),
 96                 $("input[name='phone']").val(""),
 97                 ul.add(user);
 98                 alert("Add a user!");
 99             }});
100             *****************************************/
101         },
102     });
103     
104     var userListView = new UserListView();
105     var infoView; 
106 });

注释一:

如果使用第一段代码,会报错 “id is not defined”,让我们来找一下原因。

官网上对于 create() 方法的解释如下:
collection.create(attributes, [options]) 在集合中创建一个模型。等价于用键值对象实例一个模型,然后将模型保存到服务器,保存成功后将模型增加到集合中。如果验证失败会阻止模型创建,返回 false,否则返回该模型。为了能正常运行,需要在集合中设置 model 属性。create 方法接收键值对象或者已经存在尚未保存的模型对象作为参数。

也就是先执行 user.save(),再执行 this.userList.add(user)。很显然 save() 会发送一个 AJAX 请求,因此如果它是个异步请求,在执行 add() 方法的时候很可能还未得到响应,而 add() 触发了 userList 的 add 事件,于是会执行与之绑定的 addOne() 方法,在显示页面元素的时候需要读取 id,因此会报“id is not defined”。

注释二:

为了解决注释一中的错误,我们来看一下如何将 create() 方法的 AJAX 请求变成一个同步请求。

以下是 create() 方法的源码:

 1 // Create a new instance of a model in this collection. Add the model to the collection immediately, unless `wait: true` is passed, in which case we wait for the server to agree.
 2 create: function(model, options) {
 3     var coll = this;
 4     options = options ? _.clone(options) : {};
 5     model = this._prepareModel(model, options);
 6     if (!model) return false;
 7     if (!options.wait) coll.add(model, options);
 8     var success = options.success;
 9     options.success = function(nextModel, resp, xhr) {
10     if (options.wait) coll.add(nextModel, options);
11     if (success) {
12       success(nextModel, resp);
13     } else {
14       nextModel.trigger('sync', model, resp, options);
15     }
16     };
17     model.save(null, options);
18     return model;
19 },

很显然如果 options.wait 为 false 时会直接将 model 加到 collection 中(7行),而 options.wait 为 true 的时候会在回调函数 success 执行的时候才将 model 加到 collection 中(10行)。

因此解决方法很简单,就是在调用 create() 方法的时候加上参数 {wait:true}。

注释三:

注释一中已经分析过,执行 this.userList.create(user) 等价于先执行 user.save(),再执行 this.userList.add(user),因此我想到如果将 add() 方法的执行放到 save() 方法的 success 回调函数中,应该也能解决注释一中出现的错误。

但是注释三中的代码报出了 “A "url" property or function must be specified” 的错误,原因是 User 的 url 需要通过 UserList.url 或 User.urlRoot 来生成,而这里的 user 在 save() 之前并没有被加到 UserList 中去, User.urlRoot 也并没有被赋值,因此得不到 url,无法发出 POST 请求。

注释四:

经过注释三的分析,我们知道只要在 user.save() 之前对 user.urlRoot 赋值就可以了,当然也可以直接在定义 User 模型的时候给他赋值,效果一样。

注意这里先使用了一个临时变量 ul 来存放 this.userList,然后再 success 回调函数中使用的是 ul 而不是 this.userList。这样做并不是多此一举,因为在执行 success 回调函数的时候,this 所代表的对象已经不是 UserListView 了,而是 Window 对象。关于 JavaScript 里面的 this 貌似比较复杂,有兴趣的可以自己上网搜一下,我现在也只是一知半解。

你可能感兴趣的:(JavaScript)