Multiple table rows as a backbone.js view?

Question

So I have a grid of data, and each item in the grid has an associated model and view. I need to render each item as two table rows to achieve the desired UI. (No, it wasn't my design...)

First attempt: in the view's render() method, just render two rows and add them to this.el. Then I append each view to the table, and discover that every pair of rows has been wrapped in a <div>. Invalid HTML and the layout is all wrong.

Ok, second attempt: render two rows in the view again, but instead of appending the entire view to the table, I just append the child rows by using tableItemView.$("tr"). Hooray, it works! But hold on ... the row events have now stopped firing. I discover this is because backbone uses jQuery.delegate, so all the events were delegated to the original el which is no longer part of the table.

I love backbone's clean architecture but struggle to find a nice solution to this. Any ideas?

Answer 1

Setting

tagName: 'tbody' 

should allow you to group the related tr tags together without breaking the table and still allow this.el to work.