聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

四月 12, 2012

小惡魔AppleBOY
AppleBOY
小惡魔 – 電腦技術 – 工作筆記 – AppleBOY is about »

tag cloud

» Backbone.js Event 事件介紹

backbone

今天我們可以來介紹 Backbone.js Event 事件,介紹 Event 之前,大家可以先看看 Backbone.js 的初學介紹,該教學文件可以學習如何載入 Backbone.js library,利用此套件如何去制定各種事件。Backbone.js 提供了3個 method 去控制事件產生、移除、執行,分別是 on(bind)off(unbind)trigger。文字上寫得很清楚 on 就等於 bind,off 就是 unbind,最後就是如何去 trigger 事件。底下就來簡單舉例:

綁定事件

底下例子可以幫助我們建立一個事件

html:

<div>
    <h3>backbone.js bind event</h3>
    <button class="btn btn-primary add_1">Click one event</button>
</div>

backbone.js

Backbone.Events.on('test', function(){ alert('I am appleboy'); });
$(document).on('click', '.add_1', function(event){
    Backbone.Events.trigger('test');
});

上面可以看到我們點選按鈕後,backbone.js 會觸發已註冊的 test 事件,那也許讀者會覺得每次都要寫 Backbone.Events 這麼長的字串很不方便,我們也可以自訂變數喔,把 js 改成底下即可

var object = {};
_.extend(object, Backbone.Events);
object.on('click_me', function(){ alert('click me'); });
$(document).on('click', '.add_2', function(event){
    object.trigger('click_me');
});

建立一個空 object,再利用 underscore.js 套件 extend Backbone.Events 物件,這樣就可透過 object.on 來使用了,另外如果想要綁定全部事件,那就第一個參數帶入 all,也就是

object.on('all', function(){ alert('click me'); });
$(document).on('click', '.add_2', function(event){
    object.trigger('click_me2');
    object.trigger('click_me2');
});

當我們點選按鈕時,就會跳出兩次 click me

移除事件

透過 Backbone.Events.off 可以移除事件內的單一 callback,或者是移除任何 event 或是移除全部 events,底下我們先建立三個事件

var change_1 = function() {
    alert('change_1');
};
var change_2 = function() {
    alert('change_2');
};
var change_3 = function() {
    alert('change_3');
};
object.on('click_event', change_1);
object.on('click_event', change_2);
object.on('click_event', change_3);
$(document).on('click', '.add_3', function(event){
    object.trigger('click_event');
});

上面程式碼可以看到,點選按鈕後會跳出三個不同 alert 訊息,接著透過 object.off(‘click_event’, change_1); 來移除事件 callback

$(document).on('click', '.remove_1', function(event){
    object.off('click_event', change_1);
    alert('remove change_1 function');
});
$(document).on('click', '.remove_2', function(event){
    object.off('click_event', change_2);
    alert('remove change_2 function');
});
$(document).on('click', '.remove_3', function(event){
    object.off('click_event', change_3);
    alert('remove change_3 function');
});

如果不想這麼麻煩,那該如何移除事件全部 callbacks 呢,可以透過

$(document).on('click', '.remove_event', function(event){
    object.off('click_event');
    alert('remove all event');
});

移除全部綁定的 events 可以透過

$(document).on('click', '.remove_all_event', function(event){
    object.off();
    alert('remove all event');
});

trigger 事件

用法很單純,如果要 trigger 單一 callback 可以透過底下:

object.trigger('click_event');

trigger 多個 callback function,利用 space 區隔開就可以了

object.trigger('click_event_1 click_event_2 click_event_3');

直接看 Demo

Related View

四月 9, 2012

小惡魔AppleBOY
AppleBOY
小惡魔 – 電腦技術 – 工作筆記 – AppleBOY is about »

tag cloud

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

<!DOCTYPE html>
<html>
<head>
    <title>Backbone.js example</title>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="well">
        <h1>Friend List</h1>
        <input type="text" name="username" value=""><br /><button class="btn btn-primary" id="add-friend">Add Friend</button>
        <ul id="friends-list" style="margin-top:10px"></ul>
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
</body>
</html>

使用 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("<li style='margin-top:5px;'>Friend name: " + model.get('name') + " <button class='btn btn-danger delete'>Delete Friend</button></li>");
        }
    });
    var appview = new AppView;
})(jQuery);

當使用者按下新增按鈕時,程式將 username 設定到 model 裡,並且將此 model 丟入 Collection。而 Collection 有變動時,會呼叫 addFriendList 函式,將結果輸出到 #friends-list tag。完整程式碼可以參考: Source Code

線上範例(Example)

Related View

support:

biggo.com.tw

A Django site.