本文先从项目组现有对Backbone.js中的Events模块的使用进行分析,然后列举了对Events模块的扩展使用。一起来看看吧,希望对大家
学习Backbone
有所帮助。
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哈希
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的变化);哈希的形式来绑定事件,便于代码维护;还实现了一套观察者模式,我们只需拿过来用即可,避免了重复造轮子。
来源:博客园