(二)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 });
注:以上使用的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: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();
•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> <!--应用库--> <script type="text/javascript" src="js/app.js"></script> </head> <body> <script type="text/template" id="list-template"> <a href="#add">增加新用户</a> <ul id="list"> </ul> </script> <script type="text/template" id="user-item-template"> <a class="viewUser" href="javascript:;"><%= username %></a> <a class="removeUser" href="javascript:;">删除</a> </script> <script type="text/template" id="user-template"> <p>编号<%= userid %>:</p> <a href="javascript:;" class="editUser">名字:<%= username %></a> </script> <script type="text/template" id="modify-template"> <input type="text" value="<%= username %>"> <a class="add" href="javascript:;"><%= !username ? "增加":"修改" %></a> </script> </body> </html>