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

我相信大家對於後端程式

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)

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

Friend List

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

See also