Can't re-render without breaking events

[gregberge]

I can't re-render the grid without breaking events like click on th to sort columns.

The philosophy of Backbone is such that i can re-render several times without breaking UI.

Is there a solution ? Can you fix this ?

[wyuenho]

How do you trigger a re-render and what events on which part stop working?

[gregberge]

For example, i do :

var MyView = new Backbone.View.extend({
    initialize: function () {
      View.prototype.initialize.apply(this, arguments);

      this.gridView = new Backgrid.Grid({
        collection: this.collection,
        el: '.backgrid'
      });
    },

    render: function () {
      View.prototype.render.apply(this, arguments);
      this.gridView.render();
      return this;
    }
});

var view = new MyView();
view.render(); // events OK
view.render(); // events breaked

[wyuenho]

What is in that ListGridView?

[gregberge]

ListGridView is Backgrid.Grid, sorry i made a mistake.

[wyuenho]

I can't reproduce this from the demos. Either you show me all the relevant code or you'll have to write a failing test case to point out the error.

[gregberge]

I find the origin of the problem, in each render you do a this.$el.empty(), but when you do that, jQuery unbinds all events. So there is two solutions :

• rebind events in each render using this.delegateEvents
• don't use empty

I make a fiddle to show you the problem.

[wyuenho]

Ah thanks for catching this, I just reproduced it. No need for a fiddle anymore.

[gregberge]

Ok, but i have already made it http://jsfiddle.net/neoziro/WaBJF/

[wyuenho]

Thx. Will fix that tomorrow.

[gregberge]

If you need help, don't hesitate to tell me.

An other solution is to always use setElement, in my projects i always include my subviews using this functions :

Backbone.View.extend({

  append: function (selector, view) {
    this.$(selector).append(view.render().el);
    view.delegateEvents();
    return this;
  },

  assign: function (selector, view) {
    view.setElement(this.$(selector)).render();
    return this;
  }
});

It can give you some ideas :).

Thanks for the fix and for this great job !