（二）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: user
31         });
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: ++userid
31             }));
32         }
33         this.router.navigate(‘list‘, {trigger:true});   // 跳转至list
34     }
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 });

•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:router
20         }).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:router
32         }).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:router
44         }).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();