用Backbone.js创建一个联系人管理系统(一)
原文 Build a Contacts Manager Using Backbone.js: Part 1
在這個教程里我們將會使用Backbone.js,Underscore.js,JQuery創建一個完整的聯系人管理應用.
我們會看到如何使用Underscore.js的一些基本組件方便的來展現出Backbone.js的方法.
?
這些庫都是什么?
Backbone.js是一個Javascript的前端的MVC架構
Underscore.js是一個工具集,他對Javascript功能進行了一些增強.并且擴展了array,collection,function和object
的方法.
JQuery就不用多介紹.
那么開始吧
我們首先要創建一個根目錄,然在根目錄下創建子目錄包含css,img,和js來存儲相關文件.
完成后根目錄下創建一個html文件內容如下:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>Backbone.js Web App</title><link rel="stylesheet" href="css/screen.css" /></head><body><div id="contacts"></div><script src="js/jquery-1.7.1.min.js"></script><script src="js/Underscore-min.js"></script><script src="js/Backbone-min.js"></script><script src="js/app.js"></script></body> </html>Backbone.js僅僅依賴Underscore.js但是我們這個項目還需要用到Jquery,另外我們的程序代碼會單獨寫在app.js里
另外我們項目樣式表會寫在screen.css里.
Backbone.js 來自 http://backbonejs.org/
Underscore-min.js來自?http://underscorejs.org/
?
我們創建了這個應用的骨架,接下來我們會在這系列教程中逐漸完善它.打開app.js寫入下面的內容.
(function ($) {var contacts = [{ name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },{ name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },{ name: "Contact 3", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend" },{ name: "Contact 4", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "colleague" },{ name: "Contact 5", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },{ name: "Contact 6", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "colleague" },{ name: "Contact 7", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend" },{ name: "Contact 8", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" }];} (jQuery));我們把所有的代碼都放在一個匿名立即執行函數內.? 并且把JQuery以別名$為參數傳送給匿名函數. 并且定義一個數組對象,每條記錄對應一個聯系人.
我們的教程使用這些本地數據,這樣我們可以先不考慮數據和服務器同步的問題. 這些將來再去解決.
Models
在數組后面我們開始定義這個應用的數據模型model了.請把這段代碼加在數組的后面. 但仍舊是在閉包里.
var Contact = Backbone.Model.extend({defaults: {photo: "/img/placeholder.png"} });模型model是對一個應用的數據類型的描述. 例如姓名,年齡,等等.使用Backbone.js創建model的方法就是使用Backbone.Model類的extend()
方法來擴展新的model; 我們可以添加新的屬性來擴展我們自定義model的功能.這里我們添加了defaults屬性來定義新的model的缺省值.
在這個例子里我們為每個model定義了缺省的photo屬性. 任何沒有定義photo屬性的model將會使用這個缺省屬性的值.
每個model初始化后都會調用initialize()方法, 這里我們暫時沒用用到. 沒關系.后面我們還會再來修改model的.
Collections
集合是用來管理一組model的,在這里我們定義一個Dirctory來存儲所有的Contacts.Collection的model就是Contact.我們把下面的
代碼添加到Model定義的后面. 同樣是閉包內.
var Directory = Backbone.Collection.extend({model: Contact });(太麻煩了,后面不會逐句翻譯了,原文有點羅嗦,我覺得)同樣Collection來自Backbone.Collection.extend();
model屬性可以告訴集合,集合內管理的是什么類型的數據. 雖然現在看起來簡單.不用擔心教程后面會繼續擴展
它的定義.
Views
View就是負責在應用程序中顯示數據的.它能夠把數據處理和數據顯示分離開. 這樣當部分代碼需要修改的時候
不會影響其他的部分.我們這個應用程序需要兩個視圖,第一個直接加在Directory的后面.
var ContactView = Backbone.View.extend({tagName: "article",className: "contact-container",template: $("#contactTemplate").html(), //定義模板位置render: function () {var tmpl = _.template(this.template); //把模板內的html放在<article className="contact-container"></article>里.this.$el.html(tmpl(this.model.toJSON())); //用model的值替換模版內令牌.return this;} });這個view處理單獨的一個Contact. 和model還有collection一樣. view擴展自Backbone.View的extend()方法.
這個單獨Contact的view定義了用來展示Contact的DOM(article),DOM的類"contact-container"(css定義用到)
以及用JQuery的方法定位模版(#contactsTemplate),它還有一個屬性render執行一個函數.用來渲染View但是這個例子里
我們沒有定義initialize()方法也沒有在initialize()里調用render(),所以不會自動的渲染Contact視圖.
?
標簽的屬性className.
使用Underscore的微模版
將以下代碼加到index.html聯系人Contact的<div>標簽后面
<script id="contactTemplate" type="text/template"><img src="<%= photo %>" alt="<%= name %>" /><h1><%= name %><span><%= type %></span></h1><div><%= address %></div><dl><dt>Tel:</dt><dd><%= tel %></dd><dt>Email:</dt><dd><a href="mailto:<%= email %>"><%= email %></a></dd></dl> </script>我們用了一個帶id屬性的<script>標簽這樣可以很容易的選中它. 另外在給這個標簽添加一個type="text/template"使它瀏覽器
不會被執它.在模版內我們可以定義自己想要的html并且在需要顯示數據的地方使用嵌套<%=%>來展現數據.
?
一個主視圖
我們當前的視圖僅僅描述一個單獨聯系人Contact,而且我們還沒有調用它自身的渲染方法. 而且我們現在需要一個總的
聯系人集合(Directory)的視圖,把這段代碼加到 app.js的ContactView定義后面.
var DirectoryView = Backbone.View.extend({el: $("#contacts"), //最終展示view的DOM元素<div id="contacts"></div>initialize: function () { //視圖初始化完成后執行的函數this.collection = new Directory(contacts); //用最開始初始化的數組作為數據源初始化視圖的集合.this.render(); //調用視圖自己渲染方法渲染自己.},render: function () {var that = this;_.each(this.collection.models, function (item) { //循環視圖關聯的集合that.renderContact(item); //渲染每個Contact}, this);},renderContact: function (item) { //渲染單獨一個Contact調用的方法var contactView = new ContactView({ //定義每個單獨的Contact小Viewmodel: item});this.$el.append(contactView.render().el); //渲染單獨的Contact并追加到主View里} });主視圖負責將Directory中的每個Contact都渲染出來.我們僅僅要做的將主視圖初始化就可以做到這個功能.
在DirectoryView定義后加入下面代碼:
var directory = new DirectoryView();定義好screen.css
.contact-container { width:400px; padding:10px; border:1px solid #aaa; margin:0 10px 10px 0; float:left; font-family:sans-serif; color:#333; background-color:#eee; } .contact-container h1 { margin:0; font-weight:normal; } .contact-container h1 span { float:right; font-size:14px; line-height:24px; font-weight:normal; } .contact-container img { border-width:1px; border-style:solid; border-color:#fff; border-right-color:#aaa; border-bottom-color:#aaa; margin-right:10px; float:left; } .contact-container div { margin-bottom:24px; font-size:14px; } .contact-container a { color:#333;} .contact-container dl { margin:0; float:left; font-size:14px; } .contact-container dt, .contact-container dd { margin:0; float:left; } .contact-container dt { width:50px; clear:left; }完成保存后,從瀏覽器打開index.html代碼看到:
(實際上我用IE11是不行,顯示的是一縱列沒有樣式的Contact.只有在FireFox和chrome可以正常顯示.大概是部分css不支持的問題.)
總結
這部分教程我們介紹了Backbone.js的核心組件model,collection,還有view. model存儲應用數據,和定義一些特別的行為.collection是用來
管理model的集合. view的作用是渲染和展示model中的數據.
下次的教程我們要學習怎么從集合中過濾部分model數據. 還有學習Backbone.js的另外一個重要組件route
?
補充placeholder.png
項目的源代碼可以從這里下載:
http://cdn.tutsplus.com/net/uploads/legacy/1142_bb1/demo.zip
?
轉載于:https://www.cnblogs.com/dangkei/p/5038083.html
總結
以上是生活随笔為你收集整理的用Backbone.js创建一个联系人管理系统(一)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： psd页面切割成html技巧总结
- 下一篇： c++ builder xe2 （Emb