【转】Backbone标准例子——通讯录
生活随笔
收集整理的這篇文章主要介紹了
【转】Backbone标准例子——通讯录
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
參考：http://z2009zxiaolong.iteye.com/blog/1847833
感覺不錯的例子，模型、視圖、路由等知識點都用到了：）,將此文中的源碼轉載如下：
http://dmyz.org/archives/598 這篇教程也不錯，講的很清楚。
//------------------------------------------------------------------------------------
backbone.js源碼初略：
backbone.js相當輕量級，以其0.5.1 版本為例，總代碼不過1100行左右。主要代碼包括：
event:定義一個event和callback的list，實現時間的增、刪即回調；
async:封裝http的post\delete\get\update方法；
model:定義數據模型對象，主要是其屬性（比如url）以及關鍵的回調，比如fetch會調用async模塊的ajax方法獲取數據，并執行回調；
collection：是model的集合，在這個集合中實現了一堆方法的擴展接口，例如foreach,each,map等等；
route:定義一個route列表，操作時會相應操作history對象，實現歷史跳轉；
view:對應視圖，主要是獲取其中的DOM組件并渲染，同時處理綁定在view上的事件；
//-------------------------------------------------------------------------------------
<!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 src="js/application.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> </html> (function($) {$(document).ready(function() {var Contact = Backbone.Model.extend({defaults: {name: '',email: ''},validate: function(attrs, options) {if (attrs.name == "") {return "用戶名不能為空！";};},// 用戶搜索的輔助方法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;}});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');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');}});// 左邊的側邊條視圖var SidebarView = Backbone.View.extend({className: 'sidebar',template: _.template($('#tpl-sidebar').html()),events: {'click footer button': 'create','click input': 'filter','keyup input': 'filter'},initialize: function() {_.bindAll(this, 'create', 'filter');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));});// this.model.last().view.$el.trigger("click") },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});}});// 編輯選擇的聯系人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);}});// 整個頁面的視圖，管理SiderbarView和MainView兩個子視圖var AppView = Backbone.View.extend({className: 'contacts',initialize: function() {this.sidebar = new SidebarView({model: this.model});this.main = new MainView();this.vdiv = $('<div />').addClass('vdivide');this.model.fetch();this.render();},render: function() {this.$el.append(this.sidebar.render().el);this.$el.append(this.vdiv);this.$el.append(this.main.render().el);$('#article').append(this.el);return this;},show: function(item) {this.sidebar.active(item);this.main.show(item);},edit: function(item) {this.sidebar.active(item);this.main.edit(item);}});// 路由var AppRouter = Backbone.Router.extend({routes: {'': 'show','contacts/:id': 'show','contacts/:id/edit': 'edit'},show: function(id) {if (id != undefined) {appView.show(this.getContact(id));} else {appView.show(contacts.first());}},edit: function(id) {appView.edit(this.getContact(id));},getContact: function(id) {return contacts.getByCid(id);}});var contacts = new Contacts();window.appView = new AppView({model: contacts});window.appRouter = new AppRouter();Backbone.history.start();}); })(jQuery);?
轉載于:https://www.cnblogs.com/Fredric-2013/p/4466477.html
總結
以上是生活随笔為你收集整理的【转】Backbone标准例子——通讯录的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Oracle 12c In-Memory
- 下一篇： 快速选择思维导图软件，就是这么任性