（四）backbone - DEMO - 通信录

DEMO介绍

是DEMO - User List 的扩展，增加查询

大体实现

•创建Contact Model

 var Contact = Backbone.Model.extend({
     defaults: {
         name: '小强',
         email: 'walker@dead.com'
     },
     // validate user name
     validate: function(attrs,options) {
         if (attrs.name == "") {
           return "what's the name?";
         };
     },
     // for user search
     filter: function(query) {
         if (typeof(query) === 'undefined' || query === null || query === '') return true;
         query = query.toLowerCase();
         return this.get('name').toLowerCase().indexOf(query) != -1 || this.get('email').toLowerCase().indexOf(query) != -1;
     }
 });

•创建Contact Collection

 var Contacts = Backbone.Collection.extend({
     model: Contact,
     localStorage: new Store('my-contacts')　　// 存至本地 　　
 });

•视图

- 每条联系人视图

 var ContactItemView = Backbone.View.extend({
     className: 'item',
     template: _.template($('#tpl-item').html()),
     events: {
         'click': 'select'
     },
     initialize: function() {
         _.bindAll(this, 'select');    // select方法绑定到当前对象
         this.model.bind('reset', this.render, this);
         this.model.bind('change', this.render, this);
         this.model.bind('destroy', this.remove, this);
         if(this.model.view){
             this.model.view.remove();
         }
         this.model.view = this;
     },
     render: function() {
         this.$el.html(this.template(this.model.toJSON()));
         return this;
     },
     select: function() {    // 选择某个联系人
         appRouter.navigate('contacts/' + this.model.cid, {
             trigger: true
         });
     },
     active: function() {    // 选中状态
         this.$el.addClass('active');
     },
     deactive: function() {    // 未选中状态
         this.$el.removeClass('active');
     }
 });

- 联系人列表视图，实现功能：

渲染列表、实例化ContactItemView、添加Contact、查询

 var ContactListView = Backbone.View.extend({
     className: 'sidebar',
     template: _.template($('#tpl-sidebar').html()),
     events: {
         'click footer button': 'create',    // footer 标签内的 button 标签 click 事件
         'click input': 'filter',
         'keyup input': 'filter'
     },
     initialize: function() {
         _.bindAll(this, 'create', 'filter');    // 给 create,filter 函数绑定到当前对象
         // model 监听事件
         this.model.bind('reset', this.renderAll, this);
         this.model.bind('add', this.add, this);
         this.model.bind('remove', this.remove, this);
     },
     render: function() {
         $(this.el).html(this.template());
         this.renderAll();
         return this;
     },
     renderAll: function() {
         this.$(".items").empty();
         this.model.each(this.renderOne, this);
         this.filter();
     },
     renderOne: function(contact) {
         var view = new ContactItemView({
             model: contact
         });
         this.$(".items").append(view.render().el);
     },
     create: function() {
         var contact = new Contact();
         this.model.add(contact);
         appRouter.navigate('contacts/' + contact.cid + '/edit', {
             trigger:true
         });
     },
     filter: function() {
         var query = $('input', this.el).val();
         this.model.each(function(contact, element, index, list) {
             contact.view.$el.toggle(contact.filter(query));
         });
     },
     active: function(item){
         if (this.activeItem) {
             this.activeItem.view.deactive();
         }
         this.activeItem = item;
         if (this.activeItem) {
             this.activeItem.view.active();
         }
     },
     add: function(contact) {
         this.renderOne(contact);
     },
     remove: function(contact) {
         console.log(contact);
     }
 });

- 显示联系人信息视图，实现：

切换当前联系人，并展示

 var ShowView = Backbone.View.extend({
     className: 'show',
     template: _.template($('#tpl-show').html()),
     events: {
         'click .edit': 'edit'
     },
     initialize: function() {
         _.bindAll(this, 'edit');
     },
     render: function() {
         if(this.item){
             this.$el.html(this.template(this.item.toJSON()));
         }
         return this;
     },
     change: function(item) {
         this.item = item;
         this.render();
     },
     edit: function() {
         if (this.item) appRouter.navigate('contacts/' + this.item.cid + '/edit', {
           trigger: true
         });
     }
 });

- 编辑联系人信息视图，实现：

修改保存、删除联系人

 // edit usr contact view
 var EditView = Backbone.View.extend({
     className: 'edit',
     template: _.template($('#tpl-edit').html()),
     events: {
         'submit form': 'submit',
         'click .save': 'submit',
         'click .delete': 'remove'
     },
     initialize: function() {
         _.bindAll(this, 'submit', 'remove');
     },
     render: function() {
         if(this.item){
             this.$el.html(this.template(this.item.toJSON()));
         }
         return this;
     },
     change: function(item) {
         this.item = item;
         this.render();
     },
     submit: function() {
         this.item.set(this.form());
         this.item.save();
         appRouter.navigate('contacts/' + this.item.cid, {
             trigger:true
         });
         return false;
     },
     form: function() {
         return {
             name: this.$('form [name="name"]').val(),
             email: this.$('form [name="email"]').val()
         };
     },
     remove: function() {
         this.item.destroy();
         this.item = null;
         appRouter.navigate('', {
           trigger: true
         });
     }
 });

- 主视图，联系人展示、编辑管理视图

实例化展示视图、编辑视图；切换展示视图、编辑视图

 var MainView = Backbone.View.extend({
     className: 'main stack',
     initialize: function() {
         this.editView = new EditView();
         this.showView = new ShowView();
     },
     render: function() {
         this.$el.append(this.showView.render().el);
         this.$el.append(this.editView.render().el);
         return this;
     },
     edit: function(item) {
         this.showView.$el.removeClass('active');
         this.editView.$el.addClass('active');
         this.editView.change(item);
     },
     show: function(item) {
         this.editView.$el.removeClass('active');
         this.showView.$el.addClass('active');
         this.showView.change(item);
     }
 });

- 总页面视图：

实例化列表视图、主视图

 var AppView = Backbone.View.extend({
     className: 'contacts',
     initialize: function() {
         this.contactList = new ContactListView({
             model: this.model
         });
         this.main = new MainView();
         this.vdiv = $('<div />').addClass('vdivide');
         this.model.fetch();
         this.render();
     },
     render: function() {
         this.$el.append(this.contactList.render().el);
         this.$el.append(this.vdiv);
         this.$el.append(this.main.render().el);
         $('#article').append(this.el);
         return this;
     },
     show: function(item){
         this.contactList.active(item);
         this.main.show(item);
     },
     edit: function(item){
         this.contactList.active(item);
         this.main.edit(item);
     }
 });

•路由

 dolymood.contacts = new Contacts();
 dolymood.appView = new AppView({
     model:dolymood.contacts
 });
 dolymood.AppRouter = Backbone.Router.extend({
     routes: {
         '': 'show',
         'contacts/:id': 'show',
         'contacts/:id/edit': 'edit'
     },
     show: function(id) {
         if(id !== undefined){
             dolymood.appView.show(this.getContact(id));
         }
         else {
             dolymood.appView.show(dolymood.contacts.first());
         }
     },
     edit: function(id) {
         if(id !== undefined){
             dolymood.appView.edit(this.getContact(id));
         }
     },
     getContact: function(id) {
         return dolymood.contacts.get(id);
     }
 });

注：v1.1.2 版本的Backbone.Collection，使用get函数，传入cid来获取model实例

•路由启动

 var appRouter = new dolymood.AppRouter();
 Backbone.history.start();

•html

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <title>Backbone通讯录</title>
   <link rel="stylesheet" href="css/application.css" type="text/css" charset="utf-8">
 </head>
 <body>
   <header id="header"><h1>Backbone通讯录</h1></header>
   <article id="article"></article>
 </body>
   <script src="js/lib/jquery.js" type="text/javascript" charset="utf-8"></script>
   <script src="js/lib/underscore.js" type="text/javascript" charset="utf-8"></script>
   <script src="js/lib/backbone.js" type="text/javascript" charset="utf-8"></script>
   <script src="js/lib/backbone-localstorage.js" type="text/javascript" charset="utf-8"></script>  

   <!-- 联系人 -->
   <script type="text/template" id="tpl-item">
       <%= (name ? name : "<i>无名</i>") %>
   </script>  

   <!-- 左边的侧边条，包括联系人列表 -->
   <script type="text/template" id="tpl-sidebar">
     <header>
       <input type="search" placeholder="搜索" results="0" incremental="true" autofocus>
     </header>
     <div class="items"></div>
     <footer>
       <button>新建联系人</button>
     </footer>
   </script>  

   <!-- 显示联系人详细信息 -->
   <script type="text/template" id="tpl-show">
     <header>
       <a class="edit">编辑</a>
     </header>
     <div class="content">
       <p><label>姓名：<%= name %></label></p>
       <p><label>邮箱：<%= email %></label></p>
     </div>
   </script>  

   <!-- 编辑联系人信息 -->
   <script type="text/template" id="tpl-edit">
     <header>
       <a class="save">保存</a>
       <a class="delete">删除</a>
     </header>
     <div class="content">
       <form>
         <label>
           <span>姓名：</span>
           <input type="text" name="name" value="<%= name %>">
         </label>
         <label>
           <span>邮箱：</span>
           <input type="email" name="email" value="<%= email %>">
         </label>
         <button>保存</button>
       </form>
     </div>
   </script>
   <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
 </html>