首页 > 代码库 > (二)backbone - demo - user list
(二)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 });
•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();
(二)backbone - demo - user list
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。