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

• 一．概述
• 二．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.2 显示User详细信息

界面如下，左边是User列表，点击列表中的链接会在右边显示User的详细信息：

2.html，新增了一个User详细信息的HTML模板

 <!-- 新增User详细信息的HTML模板 -->
 <script type="text/template" id="user-info-template">
     <h3>User Information</h3>
     <ul id="user-info">
         <li>ID:<span><%= id %></span></li>
         <li>Username:<span><%= username %></span><input type="text" name="username" value="<%= username %>" /></li>
         <li>Password:<span><%= password %></span><input type="password" name="password" value="<%= password %>" /></li>
         <li>Email:<span><%= email %></span><input type="text" name="email" value="<%= email %>" /></li>
         <li>Phone:<span><%= phone %></span><input type="text" name="phone" value="<%= phone %>" /></li>
         <button id="edit-submit">Submit</button>
     </ul>
 </script>

mvc2.js，UserItemView在初始化的时候会创建一个UserInfoView类型的成员变量infoView，并与之共享同一个User类型的model，每当点击UserItemView里面的<a>就会调用displayInfo函数，从而调用infoView的render函数来显示详细信息。

$(document).ready(function() { 
     
     var User = Backbone.Model.extend({
     });
     
     var UserList = Backbone.Collection.extend({
         ... //不变
     });
     
     var UserItemView = Backbone.View.extend({
         tagName : "li",
         userItemTemplate : _.template($("#user-item-template").html()), 
         events : { //注释一
               "click a" : "displayInfo", //新增
         },
         initialize : function() { 
             this.infoView = new UserInfoView({model : this.model}); //新增
         },
         render : function() {
             this.$el.html(this.userItemTemplate(this.model.toJSON()));
             return this;
         },
         displayInfo : function() { //新增
             this.infoView.render();
         },
     });
     
     //新增UserInfoView，用来显示User详细信息
     var UserInfoView = Backbone.View.extend({
         el : $("#right"),
         userInfoTemplate : _.template($("#user-info-template").html()),
         render : function(){
             this.$el.html(this.userInfoTemplate(this.model.toJSON()));
             return this;
         },
     });
     
     var UserListView = Backbone.View.extend({
        ... //不变
     });
     
     var userListView = new UserListView();
 });

注释一：

events 里面都是将方法绑定到页面的事件上，而上一节中的 bind() 方法都是将方法绑定到 Model/Collection 的事件上。

还有一点需要注意的是，这里所能绑定的事件必须包含在 el 中的页面元素。

例如：UserInfoView 指定了 el 是 $("#right") ，那么在它的events里面就不能将方法绑定到 $("#left") 的页面事件上。