I am creating an app in Backbone.js which has a parent and multiple child views. The child views contain links which they listen to and perform a function.
The parent stores a list of all of the children views. In the render function, after it is done computing its own html, it does the following:
$(this.el).html(html);
for (var i = 0; i < this.views.length; i++){
$('.children', this.el).append(this.views[i].render().el);
}
ANSWER: The problem was that I was creating the link during the render. I.e. on the first render (which was called from the init) the event successfully binded to the link. However, since all following calls of render recreate the whole element, the new link did not have the handler bound to it. This was solved via @Tom Tu solution of adding this.delegateEvents()
to the render
You are probably using jquery remove
function somewhere to remove the subviews from the view - it automatically removes all the events bound to the element (this.el) - set in the events
object. You can either use this.delegateEvents()
method in render of the subviews after you render template to rebind the event delegates set in events
object or use jquery detach
method instead to remove elements from DOM without removing event bindings (link). The delegateEvents
method is quite costly and thus i'd recommend the detach
method for removing elements that you want to reuse if you are rendering long lists of subviews - irrelevant if it's just a couple of views.
Other possibility is that you've set the events
object wrong - hard to tell from the amount of code provided, but i bet on the first one.
A really common challenge. For future finders of this question, here's a great article about view rendering:
You just need to make sure that delegateEvents is called to rebind the events on your subviews any time .html() runs. And since Backbone’s setElement calls delegateEvents already, a quick solution could look like this...
http://ianstormtaylor.com/rendering-views-in-backbonejs-isnt-always-simple/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With