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

3.5 删除User

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

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

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 来写的,如下图所示:

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

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

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

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

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

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

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

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

 

你可能感兴趣的:(JavaScript)