用Backbone.js建立一個聯繫人管理系統(一)

時間 2020-05-19

標籤 backbone.js backbone 建立一個聯繫人管理系統欄目 JavaScript 简体版

原文原文鏈接

原文 Build a Contacts Manager Using Backbone.js: Part 1css

在這個教程裏咱們將會使用Backbone.js,Underscore.js,JQuery建立一個完整的聯繫人管理應用.html

咱們會看到如何使用Underscore.js的一些基本組件方便的來展示出Backbone.js的方法.前端

這些庫都是什麼?

Backbone.js是一個Javascript的前端的MVC架構jquery

Underscore.js是一個工具集,他對Javascript功能進行了一些加強.而且擴展了array,collection,function和objectchrome

的方法.數組

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小View
            model: 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; }