title: How to make Collections from existing html in Backbone.js?
body: <p>I'm integrating Backbone.js to a project and have some problem with making sidebar's collection. </p>
  
  <p>Question at issue is how to translate generated from Smarty html-markup to collection of models. The usual solution it is using templates on front side, but it's unreal in my case.</p>
  
  <p>My sidebar's markup:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="nav-blocks"&gt;
  {foreach from=$mod.nodes item=section}
    &lt;div class="nav-block"&gt;
      &lt;h2&gt;{$section.title}&lt;/h2&gt;
      &lt;ul class="navigation"&gt;
      {foreach from=$section.nodes item=i}
        &lt;li&gt;{$i.title}&lt;/li&gt;
      {/foreach}
      &lt;/ul&gt;
    &lt;/div&gt;
  {/foreach}
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to make each <code>.nav-block</code> tied to model:</p>
  
  <pre class="lang-js prettyprint-override"><code>var Navigation = Backbone.Model.extend({
    defaults: {
      'visible': true
    }
  });
  </code></pre>
  
  <p>And when triggered event from View, the model change attribute visible:</p>
  
  <pre class="lang-js prettyprint-override"><code>var NavigationView = Backbone.View.extend({
  
    el: $('.nav-block'),
  
    events: {
      'click h2': 'toggleVisible'
    },
  
    initialize: function() {
      this.model.bind('change:visible', this.render, this);
    },
  
    toggleVisible: function() {
      this.model.toggle('visible');
    },
  
    render: function() {
  
    }
  
  });
  </code></pre>