Backbone Render View on model update

Question

I'm writing a sample app using backbone.js.

On update of my model I re-render my view in this fashion

$('.target').html("");
$('.target').append(this.$el.html(this.template(model)))

Once the view is re-rendered after model update [on change event], events attached to the el's children gets lost [doesn't seem to be like jQuery live]. Is this a known issue or am I missing something? Should I try to replace html instead of append? fiddle

Answer 1

Once the view is in DOM, you don't need to keep removing and appending it. I think the simplest way to manage this is to remove the DOM insertion from the view altogether, and let the caller of view.render to take care of it.

View:

render: function() {
  this.$el.html(this.template(model));
  return this;
}

Caller (on first render):

var view = new SomeView();
$('.target').append(view.render().el);

On subsequent renders:

view.render();

After the view has been rendered into DOM it can keep happily re-rendering itself without having to know anything about parent views. The event bindings should also stay intact between renders.