Question

我有一个Marionette视图，其中包含以下代码：

onRender: {
   $('#someDiv').find('a').click(function(){
     // some code here
   });
}

但我想重构这样的事情：

events: {
  'click [selector here]': 'executeCode'
},

executeCode: function() {
    // some code here
}

这可能吗？

Answer 1

是的，请使用空格

events: {
  'click #someDiv a': 'executeCode'
},

另请参阅http://backbonejs.org/#View-delegateEvents

Answer 2

这实际上是在Backbone中绑定DOM事件处理程序的推荐方法。 Backbone使用jQuery on方法（事件委托语法）来绑定幕后的事件处理程序。

请注意，事件处理程序适用于匹配View元素的后代。如果#someDiv不是View元素的后代，那么事件处理程序将无法正常工作。

还应该注意，处理程序上下文中的this引用的是View对象而不是事件的目标元素：

events: {
  'click #someDiv a': 'executeCode'
},

executeCode: function(event) {
   // `this` here refers to the View object 
   var clickedElement = event.currentTarget;
   // ...
}

以上代码段的作用类似于以下代码段：

viewObject.$el.on('click', '#someDiv a', viewObject.executeCode.bind(viewObject));

CSS Selector等效于backbone.js中的jQuery.find？

2 个答案: