基于Backbone.js的JavaScript MVC示例程序(5)
一．概述二．REST Server的实现2.1 REST API设计2.2 数据库设计2.3 用MyBatis实现的DAO层2.4 用Jersey实现的REST API2.5 用Spring AOP实现的日志功能三．前端的实现3.1 显示User列表3.2 显示User详细信息3.3 修改User信息3.4 增加User3.5 删除User3.6 添加validate3.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") 的页面事件上。