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

• 一．概述
• 二．REST Server的实现
• 2.1 REST API设计
• 2.2 数据库设计
• 2.3 用MyBatis实现的DAO层
• 2.4 用Jersey实现的REST API
• 2.5 用Spring AOP实现的日志功能
• 三．前端的实现
• 3.1 显示User列表
• 3.2 显示User详细信息
• 3.3 修改User信息
• 3.4 增加User
• 3.5 删除User
• 3.6 添加validate

3.5 删除User

在 User 列表中每一个条目的左侧增加一个 "del" 按钮，点击之后就会删除当前的条目，界面如下图所示：

5.html

1 <!-- 增加一个"del"按钮 -->
2 <script type="text/template" id="user-item-template">
3      <button id="delete-submit">del</button>(<%= id %>)</span><a href="#"><%= username %></a>
4 </script>

mvc5.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          events : { 
12                "click a" : "displayInfo",
13                "click #delete-submit" : "clear", //新增
14          },
15          initialize : function() { 
16              this.model.bind('change', this.render, this);  
17              this.model.bind('destroy', this.remove, this); //新增
18          },
19          clear : function(){ //新增
20              this.model.destroy();
21          },
22          ... //其余不变 
23      });
24      
25      var UserInfoView = Backbone.View.extend({
26         initialize : function() {
27             this.model.bind('change', this.render, this); 
28             this.model.bind('destroy', this.remove, this); //新增
29         },
30          ... //其余不变 
31      });
32      
33      var UserListView = Backbone.View.extend({
34          ... //不变 
35      });
36      
37      var userListView = new UserListView();
38      var infoView; 
39  });

 

这个功能只增加了6行 JavaScript 代码，还是比较简单的，需要说明的前几节都说过了，只能没话找点话说了……

上面的代码里，删除执行的流程是仿照官网的例子 Todos 来写的，如下图所示：

于是我想了一下，为什么非要通过绑定 User 的 destroy 事件来调用 UserItemView.remove() 呢？直接在 UserItemView.clear() 里面调用 remove() 不就完了？执行流程如下图所示：

改完代码测试发现可行，而且代码的位置更加集中了，更容易理解和维护。

但是仔细想一想，如果在 UserInfoView 也就是右侧用户详细信息的部分还有一个删除按钮，还是使用第一种方法好一些，因为 UserItemView.remove() 是绑定到了 User 的 destroy 事件上，而不管 User 被谁删除了，都会触发这个时间，从而执行 UserItemView.remove()，流程如下图所示：

所以 UserInfoView 里面也需要将 remove() 方法绑定到 User 的 destroy 事件上（28行），否则如果如果右侧正在显示 User 的详细信息，左侧点击 "del" 之后只会删除左侧列表中的条目，而右侧详细信息仍然会显示。

可以得出一个结论，尽量将跟 Model 相关的页面元素变化绑定到 Model 的事件上去，而不是在 View 中直接调用方法，这样的话无论 Model 在哪里被修改了，都会引起页面的变化。