Backbone.js中的Events模块如何使用?

贲功
2023-12-01
本文先从项目组现有对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的变化);哈希的形式来绑定事件,便于代码维护;还实现了一套观察者模式,我们只需拿过来用即可,避免了重复造轮子。

来源:博客园
 类似资料: