Backbone.js中的Events模塊使用

 

本文先從項目組現有對Backbone.js中的Events模塊的使用進行分析，然后列舉了對Events模塊的擴展使用。

 

Events哈希

Backbone的events哈希允許我們為el相關的自定義選擇器或者直接為el本身（沒有選擇符的情況）提供事件監聽器。事件采用的是‘evnetName selector’: 'callbackFunction'這樣的形式，並且支持大量的事件類型，包括click、mouseover、dblclick、blur等，但還是有些事件類型是不支持的，例如：hover事件。

一個簡單的例子：

  var  testView = Backbone.View.extend({
        events: {
            "click .tax-personnel-unmodify-btn": "shadeLayerHint",
            "click": "viewClickDeal",
            "blur input[name=personnelSerachKey]": "reQueryList",
            "keypress input[name=personnelSerachKey]": "personnelSerachKeyPress"
        }
    })

值得注意的是：上面的事件綁定僅限該view下面元素的事件的綁定，如果需要綁定不是該view下的節點的事件，可以使用jQuery的方式綁定。

 

更多運用

以上是項目組現在對Backbone事件的使用，當然通過查看官網的文檔，看到Backbone事件，發現還有很多用途還未挖掘。下面的文章是對Backbone事件的更多應用。

運用1：實現model、view的雙向綁定（目前項目組用的stickit實現)

 

var model = new Backbone.Model();
var view = new Backbone.View();

view.listenTo(model, 'changeEvent', view.changeView);

view.changeView = function(){};

model.trigger("changeEvent");

運用2：實現觀察者模式

利用Backbone的Events，可以很輕松的實現觀察者模式，下面的例子有訂閱、發布事件、取消訂閱三種行為。

var observe = {};

_.extend(observe, Backbone.Events);
// 訂閱
observe.on("say", hi);
observe.on("say", hello);

function hi(msg){
console.log("hi " + msg);
}

function hello(msg){
console.log("hello " + msg);
}
// 發布事件
observe.trigger("say", "Mr.Liu");
// 取消訂閱
observe.off("say", hi);
observe.trigger("say", "Mr.Z");

 

小結：

整體說來Backbone的events模塊還是很不錯的，完全解決了我們綁定事件（jQuery方式）時dom節點是否純在的問題（具體實現是利用觀察者模式監聽el的變化）；哈希的形式來綁定事件，便於代碼維護；還實現了一套觀察者模式，我們只需拿過來用即可，避免了重復造輪子。

 

擴展：

有興趣的朋友，可以看一下Events模塊的實現，不是很復雜。