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

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

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

 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          tagName : "li",
12          userItemTemplate : _.template($("#user-item-template").html()), 
13          events : { //注释一
14                "click a" : "displayInfo", //新增
15          },
16          initialize : function() { 
17              this.infoView = new UserInfoView({model : this.model}); //新增
18          },
19          render : function() {
20              this.$el.html(this.userItemTemplate(this.model.toJSON()));
21              return this;
22          },
23          displayInfo : function() { //新增
24              this.infoView.render();
25          },
26      });
27      
28      //新增UserInfoView，用来显示User详细信息
29      var UserInfoView = Backbone.View.extend({
30          el : $("#right"),
31          userInfoTemplate : _.template($("#user-info-template").html()),
32          render : function(){
33              this.$el.html(this.userInfoTemplate(this.model.toJSON()));
34              return this;
35          },
36      });
37      
38      var UserListView = Backbone.View.extend({
39         ... //不变
40      });
41      
42      var userListView = new UserListView();
43  });

注释一：

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

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

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