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模块的实现，不是很复杂。