如何使用`Backbone.View.events`定义来侦听自定义子视图事件？

Question

是否可以使用Backbone.View.events定义来侦听自定义子视图事件？

儿童定义

所有click事件被缓存起来，并触发我clicked功能：

var Child = Backbone.View.extend({ 
    events : { 
     'click' : 'clicked' 
    }, 
    clicked: function() { 
     alert('View was clicked'); 
     this.trigger("customEvent"); 
    }, 
    render: function() { 
     this.$el.html("<span>Click me</span>"); 
    } 
}); 

父定义

为什么不customEvent事件打电话给我action功能？

var Parent = Backbone.View.extend({ 
    events : { 
     'customEvent' : 'action' 
    }, 
    action : function() { 
     alert('My sub view triggered a custom event'); 
    }, 
    render : function() { 
     var child = new Child(); 
     this.$el.append(child.el); 
     child.render(); 
    } 
}); 

创建和渲染父

var parent = new Parent(); 
parent.$el.appendTo(document.body); 
parent.render(); 

jsfiddle example

我知道可以使用listenTo代替，但使用的事件定义似乎更清洁。

我的目的是建立一个子视图（例如颜色选择器），它在完成后触发事件。

Answer 1

快速注： -

• 在视图中的事件对象，我们不应该定义自定义事件。对于自定义事件，我们应该做绑定。使用bind（）方法或使用on（）来侦听某个事件。
• 如果您的子视图的el元素位于您的父视图的el内，您可以直接在el的el上监听事件，前提是您没有从child的事件处理函数返回false。 看看这个：Code where parent view is listening event on element onside child view

如果你只想使用自定义事件，您可以在这里看到Your Updated Fiddle

var Child = Backbone.View.extend({ 
    initialize: function(options) { 
     this.parent = options.parent; 
    }, 
    events : { 
     'click' : 'clicked' 
    }, 
    clicked: function() { 
     alert('View was clicked'); 
     this.parent.trigger("customEvent"); 
    }, 
    render: function() { 
     this.$el.html("<span>Click me</span>"); 
    } 
}); 

var Parent = Backbone.View.extend({ 
    initialize: function() { 
     this.on('customEvent', this.action); 
    }, 
    action : function() { 
     alert('My sub view triggered a custom event'); 
    }, 
    render : function() { 
     var child = new Child({parent: this}); 
     this.$el.append(child.el); 
     child.render(); 
    } 
}); 

var parent = new Parent(); 
parent.$el.appendTo(document.body); 
parent.render();