Come utilizzare la definizione `Backbone.View.events` per ascoltare gli eventi di sottoview personalizzati?

Question

È possibile utilizzare la definizione Backbone.View.events per l'ascolto di eventi di visualizzazione secondaria personalizzati?

definizione Bambino

Tutti click eventi vengono memorizzati nella cache e attivano la mia clicked funzione:

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>"); 
    } 
}); 

definizione Parent

Perché customEvent eventi non chiamano la mia funzione 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(); 
    } 
}); 

creazione e il rendering genitore

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

jsfiddle example

So che potrebbe usare listenTo invece, ma usando la definizione di eventi sembra essere più pulita.

La mia intenzione è quella di creare una vista secondaria (ad esempio un selettore di colori) che attiva un evento dopo che è stato eseguito.

Answer 1

Quick Notes: -

• In eventi oggetto di una vista, non dobbiamo definire gli eventi personalizzati. Per eventi personalizzati dovremmo fare il binding. Utilizza il metodo bind() o ascolta alcuni eventi usando on().
• Se l'elemento el della propria sottoview si trova all'interno della visualizzazione padre, è possibile ascoltare direttamente gli eventi su child el anche se non si restituisce false dal gestore di eventi figlio. Date un'occhiata a questo: Code where parent view is listening event on element onside child view

Se si desidera utilizzare solo evento personalizzato, si può vedere qui 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();