2013-04-07 10 views
5

Kann die Definition Backbone.View.events verwendet werden, um nach benutzerdefinierten Subview-Ereignissen zu suchen?Wie kann die `Backbone.View.events` -Definition verwendet werden, um nach benutzerdefinierten Subview-Ereignissen zu suchen?

Child Definition

Alle click Ereignisse zwischengespeichert werden und lösen meine clicked Funktion:

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

Eltern Definition

Warum nicht customEvent Ereignisse rufen meine action Funktion?

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

Eltern Erstellen und machen

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

jsfiddle example

Ich weiß, dass listenTo stattdessen verwenden könnte, aber die Ereignisse nach Definition scheint sauberer zu sein.

Meine Absicht ist es, eine Unteransicht (z. B. eine Farbauswahl) zu erstellen, die ein Ereignis auslöst, nachdem es fertig ist.

Antwort

9

Quick Notes: -

  • In Ereignisse Gegenstand einer Ansicht, wir sollten nicht benutzerdefinierte Ereignisse definieren. Für benutzerdefinierte Ereignisse sollten wir verbindlich sein. Verwenden Sie entweder die Methode bind() oder hören Sie ein Ereignis mit on().
  • Wenn sich das El-Element Ihrer Unteransicht in der El-Datei der übergeordneten Ansicht befindet, können Sie Ereignisse auch direkt auf der Child-Liste abhören, vorausgesetzt, Sie geben nicht false aus der Ereignisbehandlungsroutine des Kinds zurück. Werfen Sie einen Blick auf diese: Code where parent view is listening event on element onside child view

Wenn Sie benutzerdefinierte Ereignis nur verwenden möchten, können Sie hier sehen 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(); 
+0

Was denken Sie über '$ this el.trigger ("customEvent".) '? – jantimon

+0

Noch einmal, Ihr el Element hört nicht auf "customEvent", also wird dies nicht funktionieren. Recht ? Bitte sehen Sie sich den JSbin-Code an. – sachinjain024

+0

Es funktioniert: http://jsfiddle.net/YLzUJ/2/ – jantimon

Verwandte Themen