`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の内側にある場合、子のイベントハンドラからfalseを返さない限り、子のelのイベントを直接聴くことができます。 これを見てみましょう：Code where parent view is listening event on element onside child view

をあなただけのカスタムイベントを使用したい場合、あなたはこの$のel.trigger（「customEvent」 `についてどう思いますか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();