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 裡面,我們可以這樣寫



    Backbone.js example
    


    

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)