基于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 在哪里被修改了,都会引起页面的变化。