How is the performance when each row gets its own object instantiated, its own template loaded, and its own events attached? What happens when you have 1000+ rows in a scrollable/sortable/filterable table? I tried nested views approach but the performance was lacking in slower PCs when the row count was high.
What I prefer to do is the following:
class Example.Views.TableView extends Backbone.View
events:
'click td': 'clicked'
rowHtml: ->
x = []
p = $('#person_row').html()
for person in @collection.models
x.push(_.template(p, person))
x.join('')
clicked: (e) ->
id = $(e.target).parents('tr').attr('id')
# handle action for row id
render: ->
# render self view including rowHTML
The template is loaded just once into a variable and filled in each iteration. Only one set of events is attached to the DOM. Only one call is made to DOM to create all the rows, one string merged from HTML array. I still get the benefit of view and subview templates, without the constructor for subview objects being called 1000 times when all I need is the <tr> HTML x 1000.