title: Delegating events to sub-views in Backbone.js
body: <p>We all know doing something like this is bad:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;Item&lt;/li&gt;
    &lt;li&gt;Item&lt;/li&gt;
    ... 500 more list items
  &lt;/ul&gt;
  </code></pre>
  
  <p>and then...</p>
  
  <pre><code>$("ul li").bind("click", function() { ... });
  </code></pre>
  
  <p>I've been looking through a lot of Backbone examples / guides and the following seems to be a standard approach to rendering a list with items, based from a collection of models. </p>
  
  <pre><code>var ListView = Backbone.View.extend() {
  
    tagName: 'ul',
  
    render: function() {
      this.collection.each(function(item) {
        var view = new ListItemView({model: item});
        $(this.el).append(view.render().el);
      });
      return this;
    }
  });
  </code></pre>
  
  <p>A list item view:</p>
  
  <pre><code>var ListItemView = Backbone.View.extend() {
  
    tagName: 'li',
  
    events: {
     'click' : 'log'
    }
  
    log : function() {
      console.log(this.model.get("title"));
    }
  
    render: function() {
      $(this.el).html(this.template(this.model.toJSON()));
      return this;
    }
  });
  </code></pre>
  
  <p>If I'm not mistaken, instantiating the listView with a collection with 500 models, gives me 500 click events, one for each row. This is bad right?</p>
  
  <p>I know Backbone has built in event delegation for namespaced events:</p>
  
  <pre><code>events : {
    'click li' : 'log'
  }
  </code></pre>
  
  <p>I suppose I could put this in my ListView, and it would only create one click event for the entire list, but then I wouldn't be able access to model data corresponding to the clicked list item.</p>
  
  <p>What patterns do backbone developers use to solve this typical problem?</p>