（二）backbone - DEMO - user list

Demo介绍

学习了如何基本的使用Backbone，展示用户信息

使用JQuery操作DOM，backbone.localStorage.js操作localstorage

大体实现

•创建user Model

 1 var User = Backbone.Model.extend({ 2         defaults: { 3             username: '小强' 4         }, 5         initialize: function() { 6             if (!this.get("username")) { 7                 this.set({"username": this.defaults.username}); 8             } 9             if (!this.get("userid")) {10                 this.set({"userid": ++userid});11             }12         }13     });

•创建user Collection管理users

1 var UserCollection = Backbone.Collection.extend({2     model: User,3     // 持久化到本地数据库4     localStorage: new Store("users")5 });

•创建View

按功能页划分：

- 列表页

-添加（修改）页

- 详情页

创建基础View

1 var View = Backbone.View.extend({2     register:function (state) {    3         this.state = state;4         return this;5     }6 });

创建User Item 视图

 1 var UserItemView = View.extend({ 2     tagName: 'li',  // 放view展示内容的外层容器,默认div 3     template: _.template($('#user-item-template').html()), 4     render: function () {    // 渲染 5         this.$el.html(this.template(this.model.toJSON())); 6         return this; 7     }, 8     events:{  // 事件列表 9         'click .removeUser': 'deleteUser',10         'click .viewUser': 'viewUser'11     },12     viewUser: function() {13         this.state.trigger('viewUser', this.model);14     },15     deleteUser: function() {16         this.state.trigger('removeUser', this.model);17         this.remove();18     }19 });

创建User list 视图，该视图可创建user item view

 1 var userListView = View.extend({ 2     template: _.template($('#list-template').html()), 3     initialize: function() { 4         var view = this; 5         this.state = new Backbone.Model();  // 实例化一个model 6         this.router = this.options.router; 7         // 调用fetch触发reset 8         this.collection.unbind('reset'); 9         this.collection.bind('reset', this.addAll, this);10         setTimeout(function(){11             view.collection.fetch();12         },0);13     },14     render: function() {15         var view = this;16         this.$el.html(this.template(this.state.toJSON()));17         // 服务器同步18         this.state.on('removeUser', function(user) {19             user.destory();20             view.collection.remove(user);21         });22         this.state.on('viewUser', function(user) {23             view.router.navigate('user/' + user.cid, {trigger:true});24         });25         26         return this;27     },28     createUserItemView: function(user) {29         var userItemView = new UserItemView({30             model: user31         });32         userid = Math.max.call(null, user.get('userid'),userid);33         userItemView.register(this.state).render().$el.appendTo($('#list'));34     },35     addAll: function() {36         this.collection.each(this.createUserItemView.bind(this));37     }38 }); 

User Modify 视图

 1 var UserModifyView = View.extend({ 2     template: _.template($('#modify-template').html()), 3     initialize: function() { 4         this.router = this.options.router; 5     }, 6     render: function() { 7         var view = this; 8         if(this.model) { 9             this.$el.html(this.template(this.model.toJSON()));10         }11         else {12             this.$el.html(this.template({username: ''}));13         }14         setTimeout(function() {15             view.$el.find('input').focus().select();    //设置焦点并选中16         }, 0);17         return this;18     },19     events: {20         'click a.add': 'modify'21     },22     modify: function(){23         var view = this;24         if(this.model){25             this.model.save({'username': this.$el.find('input').val()});26         }27         else {28             this.router.userCollection.create(new User({29                 username:view.$el.find('input').val(),30                 userid: ++userid31             }));32         }33         this.router.navigate('list', {trigger:true});   // 跳转至list34     }35 });

User Detail 视图

 1 var UserView = View.extend({ 2     template: _.template($('#user-template').html()), 3     initialize: function(){ 4         this.router = this.options.router; 5     }, 6     render: function(){ 7         var view = this; 8         this.$el.html(this.template(this.model.toJSON())); 9         return this;10     },11     events: {12         'click .editUser': 'editUser'13     },14     editUser: function() {15         this.router.navigate('edit/' + this.model.cid, {trigger:true});16         this.remove();17     }18 });

注：以上使用的backbone版本是0.9.2，该版本Backbone.View中可导出options属性，但1.1.2 版本已不再提供该属性

因此，View的定义、实例化可改为：

 1 var UserListView = View.extend({ 2         ... 3         initialize: function() { 4             var view = this; 5             this.state = new Backbone.Model(); 6             this.router = this.attributes.router;   // 使用attributes属性获取 7             ... 8         } 9         ...10 })11 12 this.currentView = new UserListView({13     collection: router.userCollection,14     attributes:{router:router}    // 使用attributes属性传递15     }).render().$el.appendTo($(this.el));

•Router 控制器

使用控制器将定义的类进行组合

 1 var App = Backbone.Router.extend({ 2     initialize: function(el) { 3         this.el = el; 4         this.userCollection = new UserCollection(); 5     }, 6     routes: { 7         '': 'list', 8         'list': 'list', 9         'add': 'edit',10         'edit/:cid': 'edit',11         'user': 'user',12         'user:/:cid': 'user'13     },14     list: function() {15         var router = this;16         this.clean();17         this.currentView = new UserListView({18             collection: router.userCollection,19             router:router20         }).render().$el.appendTo($(this.el));21     },22     edit: function(cid) {23         var router = this,24             user = null;25         this.clean();26         if(cid){27             user = router.userCollection.getByCid(cid);28         }29         this.currentView = new UserModifyView({30             model:user,31             router:router32         }).render().$el.appendTo($(this.el));33     },34     user: function() {35         var router = this,36             user = null;37         this.clean();38         if(cid){39             user = router.userCollection.getByCid(cid);40         }41         this.currentView = new UserView({42             model:user,43             router:router44         }).render().$el.appendTo($(this.el));45     },46     clean:function () {47         if (this.currentView) {48             this.currentView.remove();49             this.currentView = null;50         }51     }52 });

•实例化App

1 new App('body');2 Backbone.history.start();

•html

<!DOCTYPE html><html><head>    <title>用户列表以及详细信息</title>    <meta charset="UTF-8"/>    <link rel="stylesheet" type="text/CSS" href="css/app.css">    <!-- 公共库 -->    <script type="text/javascript" src="js/lib/jquery.js"></script>    <script type="text/Javascript" src="js/lib/underscore.js"></script>    <script type="text/javascript" src="js/lib/backbone.js"></script>    <!-- 本地存储库 -->    <script type="text/javascript" src="js/lib/backbone.localStorage.js"></script>