Javascript 前端工具 Backbone.js Framework 初學介紹

backbone
我相信大家對於後端程式

PHP, Ruby, Python .. 等語言都已經相當熟悉,進階開發者也都接觸了好用的後端 Framework 如 CodeIgniter, CakePHP, Django, Ruby on Rail, Yii, Symfony .. 等,用 Framework 最大的好處並不是在 Framework 提供了大量工具,而是制定了 MVC 架構,讓專案多位開發者可以遵循,上了講了這麼多後端 MVC Framework,那麼前端呢?接下來介紹前端強大工具: Backbone.js

什麼是 Backbone.js 簡單來說 Backbone.js 就是一套前端 Javascript Framework,它提供 MVC 架構,相信大家都玩過後端 MVC,那至於前端呢,好像比較少人提到,這就是介紹 Backbone.js 最主要的目的。Backbone.js 包含了 Model View Controller 來讓使者操作,Model 提供了key-value 結構,以及可以 binding 大量 event,開發者可以透過 RESTful JSON interface 來跟 Backbone.js 的 Model 及 Collection 搭配。如果想瞭解 Backbone.js 線上文件可以參考

GitHub 網站,如果想瞭解程式碼可以參考 source code 註解

載入 Backbone.js 在使用 Backbone.js 之前,大家必須要先瞭解,Backbone.js 有使用到兩個額外的 Library,那就是

Underscore.js( > 1.3.1) 及 jQuery( > 1.4.2),所以在 html 裡面,我們可以這樣寫




    

Friend List


使用 Backbone.js 接下來宣告 View 的作法:

window.AppView = Backbone.View.extend({
    el: $("body"),
    initialize: function () {
        this.friends = new Friends({ view: this });
    },
    events: {
        "click #add-friend":  "showPrompt"
    },
    showPrompt: function () {
        var username = $("input[name=username]").val() || "";
        alert(username);
    }
});
var appview = new AppView;
可以看到上面,程式裡面增加了一個 Clieck event,並且點選後會轉到 showPrompt 這 callback function,直接在頁面上跳出 alert 視窗,並且顯示您輸入的名稱。接下來要新增 Model 跟 Collection。
Friend = Backbone.Model.extend({
    name: null
});

Friends = Backbone.Collection.extend({
    initialize: function (options) {
        this.bind("add", options.view.addFriendList);
    }
});
宣告 Friend Model 用來設定使用者名稱,而 Friends Collection 則是用來設定多個 Model,初始化 initialize 時則設定 add event,當 Collection 有變動時,則會呼叫 View 裡面的 addFriendList function。完整 js 碼如下
(function ($) {
    Friend = Backbone.Model.extend({
        name: null
    });
    
    Friends = Backbone.Collection.extend({
        initialize: function (options) {
            this.bind("add", options.view.addFriendList);
        }
    });

    window.AppView = Backbone.View.extend({
        el: $("body"),
        initialize: function () {
            this.friends = new Friends({ view: this });
        },
        events: {
            "click #add-friend":  "showPrompt",
            "click .delete":  "delete_li"
        },
        delete_li: function(e) {
            $(e.currentTarget).parent().remove();
        },
        showPrompt: function () {
            var username = $("input[name=username]").val() || "";
            this.friend_model = new Friend({'name': username});
            this.friends.add(this.friend_model);
        },
        addFriendList: function (model) {
            $("#friends-list").append("

  • Friend name: " + model.get('name') + "
  • "); } }); var appview = new AppView; })(jQuery);
    當使用者按下新增按鈕時,程式將 username 設定到 model 裡,並且將此 model 丟入 Collection。而 Collection 有變動時,會呼叫 addFriendList 函式,將結果輸出到 #friends-list tag。完整程式碼可以參考:

    Source Code 線上範例(Example)


    See also