title: Representing existing HTML as Backbone.js data structures in CoffeeScript
body: <p>I'm having a rough time wrapping my head around this.</p>
  
  <p>I have an HTML list, and I want to use Backbone.js to handle events on those list items. Here's what I've got so far. This is a simplified scenario to help me better understand how to structure a larger application. For my example, I simply want to ingest an existing HTML list into the Backbone structure, and handle click events through the Backbone view.</p>
  
  <p>I'm getting an error related to using @model in the view, but I'm fairly certain I'm misunderstanding things conceptually here.</p>
  
  <p>CoffeeScript:</p>
  
  <pre><code>$ -&gt;
      class Item extends Backbone.Model
          name: null
  
      class ItemList extends Backbone.Collection
          model: Item
  
      class ItemView extends Backbone.View
          tagName: 'li'
  
          initialize: =&gt;
              @model.bind('change', this.render)
              @model.view = this
  
          events:
              'click' : 'clicked'
  
          clicked: -&gt; 
              console.log 'clicked'
  
          render: =&gt;
              this
  
      class ItemListView extends Backbone.View
          el: $('ul#test')
  
          initialize: =&gt;
              $('li', @el).each(@addItem)
  
          addItem: (item) -&gt;
              item = new ItemView({ el: item })
  
          render: =&gt;
              this
  
      Items = new ItemListView
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id="test"&gt;
      &lt;li&gt;Hi thar&lt;/li&gt;
      &lt;li&gt;Yeah&lt;/li&gt;
      &lt;li&gt;OK&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here's a jsfiddle I started earlier: <a href="http://jsfiddle.net/Saxx4/" rel="nofollow">http://jsfiddle.net/Saxx4/</a></p>