Rückgrat click-Ereignis nicht auslösen auf dynamische Ansicht
Ich habe eine backbone-view erstellt ein neues div für jedes Modell, dass ist an Sie übergeben. Allerdings habe ich nicht bekommen jede Art von events zu feuern (klicken Sie auf ein.change-status) auf die Ansicht, und ich vermute, es ist, weil die Elemente darin sind auch Erträge aus einer Vorlage. Bitte lassen Sie mich wissen, wenn es ist ein Weg, um dieses.
var videoDivView = Backbone.View.extend({
el: '<div class="vendor-video" />',
initialize: function(){
_.bindAll(this);
this.render();
this.model.on('change:published', this.enableSaveButton);
},
events: {
'click a.change-status' : 'changeVideoStatus'
},
template: video_tmpl,
render: function(){
this.$el.attr("id", 'video-'+this.model.id);
this.$el.html(this.template(this.model.toJSON()));
this.$el.data('status', video_statuses[this.model.get('published')]);
},
changeVideoStatus: function(e) {
console.log(this.model);
return false;
},
enableSaveButton: function() {
$('#save-changes').removeClass('disabled').removeAttr('disabled');
}
});
ein Beispiel-template Aussehen würde:
<script id="single-video-tmpl" type="text/x-jquery-tmpl">
<div>
<div class="video-info">
<span class="video-title"><%=video_title%></span>
<div class="bottom-info">
<a href="#<%=id%>" class="change-status"></a>
</div>
</div>
</div>
</script>
- die
el
Attribut, das Sie uns macht keinen Sinn, es sollte sein, wie jquery-Selektor (api.jquery.com/category/selectors). - Ich habe es erstellen Sie ein div für jedes Modell
- Oh, funktioniert das? Ich habe nie gesehen, wie, um ehrlich zu sein, sorry.
- Das ist in Ordnung. Ja, es funktioniert großartig, dass Art und Weise je nachdem, was Sie versuchen zu erreichen.
- Ich denke, es könnte sein, weil das element wird nur dann erstellt, nachdem es initialisiert wurde. Also bei der Initialisierung (wo die
events
- Objekt geparst wird) kann es nicht binden Sie das click-Ereignis auf ein element in den DOM. - Ja, das ist es, was ich vermutete. Ich kann mir vorstellen es hat einen Weg um ihn herum, die Antwort unten scheint, das wäre die Lösung, aber es funktioniert nicht
- wo steckst du die
this.delegateEvents()
genau? - Ich habe versucht, es in der render-Funktion nach html wurde Hinzugefügt
- Sie haben eine jsfiddle mit diese?
- Ist Ihre
a
element tatsächlich leer, wenn du es renderst? Versuchen:<a href="#<%=id%>" class="change-status">Some Text Here</a>
.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gibt es einige Dinge, die möglicherweise die Ursache des Problems.
Zuerst, Ihre
el
Erklärung scheint verdächtig zu sein. Wenn Sie möchten, dass ein div mit der Klasse, die Sie gerade haben, um zu definieren, dieclassName
- Attribut, da der Standard für backbone viewsdiv
.Statt:
el: '<div class="vendor-video" />'
verwenden Sie einfach:
className: 'vendor-video'
Sehe ich keine details über Ihre Sicht der Initialisierung Methoden, aber die beste Praxis ist die Initialisierung einer Ansicht und dann machen Sie es zum container:
auch die Letzte Zeile der Arbeit, die Sie zu
return this;
auf Ihre render-Methode.Zur Verwendung
this.delegateEvents()
sollten Sie diese Funktion aufrufen, die nach Ihrer Ansicht ist bereits in dieDOM
sonst macht es keinen Sinn. ie:delegateEvents()
will macht Ihrer Ansicht Ereignisse wieder lebendig.Versuchen, eine
this.delegateEvents()
nach dem Rendern Sie den neuen Inhalt.Ich hatte ein ähnliches problem.
Können Sie lösen dieses problem in zwei Schritten.
- Erstellen Sie eine
tagName
im Blick- Fügen Sie Ihre Vorlage in
this.$el
Das ist alles.
Und es funktioniert ohne
this.delegateEvents()
Ich ein Problem beobachtet, mit der tagName und Anhängen mit dieser.$el ist, wird der Ereignis-listener konnte nicht befestigen Sie das Ereignis aus, für das Letzte element erstellt, mit ausgewählten tagName. Aber, das problem habe gelöst, wenn mit dieser.delegateEvents() nach dem hinzufügen der Elemente zum DOM.