基于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

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

mvc5.js

$(document).ready(function() { 
     
     var User = Backbone.Model.extend({
     });
     
     var UserList = Backbone.Collection.extend({
         ... //不变 
     });
     
     var UserItemView = Backbone.View.extend({
         events : { 
               "click a" : "displayInfo",
               "click #delete-submit" : "clear", //新增
         },
         initialize : function() { 
             this.model.bind('change', this.render, this);  
             this.model.bind('destroy', this.remove, this); //新增
         },
         clear : function(){ //新增
             this.model.destroy();
         },
         ... //其余不变 
     });
     
     var UserInfoView = Backbone.View.extend({
        initialize : function() {
            this.model.bind('change', this.render, this); 
            this.model.bind('destroy', this.remove, this); //新增
        },
         ... //其余不变 
     });
     
     var UserListView = Backbone.View.extend({
         ... //不变 
     });
     
     var userListView = new UserListView();
     var infoView; 
 });

这个功能只增加了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 在哪里被修改了，都会引起页面的变化。