title: Backbone table view consuming row view - how to structure?
body: <p>I have a collection of models that I wish to render in a table view. Each model should be represented by a single row in the table, and this row should be generated using a template. I should be able to attach event handlers to that row (say click), that upon event alert some specific information regarding the model associated with that row.</p>
  
  <p>A common way I've seen similar things to this done is to break each row out into it's own view, and have a parent view (lets say the table in this case) use the row view to generate the html to include in your code. However I can't figure out how this works with templates.</p>
  
  <p>In this case, I can not attach events specifically to the RowView as it has no reference to a dom element (<code>this.el</code> for backbone), it simply returns a string. How can I achieve what I want, whilst using a template to maximum capacity?</p>
  
  <p>The question isn't specifically about events, templating or using nested views, but more about the right way to use Backbone to achieve this kind of output.</p>
  
  <p>Sample code(also in a <a href="http://jsfiddle.net/9avm6/4/" rel="noreferrer">fiddle</a>):</p>
  
  <pre><code>/** View representing a table */
  var TableView = Backbone.View.extend({
      tagName: 'table',
      render: function() {
          var rows = _.map(this.collection.models, function(p) {
              return new RowView({model: p}).render();                        
          });
          $('body').html(this.$el.html(rows.join('')));
      }
  });
  
  /** View representing a row of that table */
  var RowView = Backbone.View.extend({
      render: function() {
          // imagine this is going through a template, but for now
          // lets just return straight html.
          return '&lt;tr&gt;' + 
                  '&lt;td&gt;' + this.model.get('name') + '&lt;/td&gt;' + 
                  '&lt;td&gt;' + this.model.get('age') + '&lt;/td&gt;' +
                 '&lt;/tr&gt;';
      }
  });
  
  var data = [
      {'name': 'Oli', 'age': 25},
      {'name': 'Sarah', 'age': 20}];
  
  /** Collection of models to draw */
  var peopleCollection = new Backbone.Collection(data);
  var tableView = new TableView({collection: peopleCollection});
  tableView.render();
  </code></pre>
  
  <p>Thank you!</p>