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:

backbone.js bind event

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