如何使用`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();