title: How to build this web app with Backbone.js?
body: <p><em>I'm struggling to get my head around collections, models etc. in Backbone.</em></p>
  
  <p>Let's say the app consists of a Sidebar, a Timeslider and a Column chart:</p>
  
  <p><img src="https://i.stack.imgur.com/hS1t3.png" alt="Web app mockup"></p>
  
  <p>To provide some background, I've previously implemented the columnChart class using the functional inheritance pattern:</p>
  
  <pre><code>namespace.columnChart = function() {
  
      var chart = {};
  
      var width = 500;
      var height = 500;
      var data = [];
  
      chart.setState = function(state){
          data = state.data;
          updateVis();
      }
  
      function updateVis(){
          ... render chart based on state ...
      }
  
      return chart;
   }
  </code></pre>
  
  <p>With simple binding I can call the setState method on the columnChart when for example adding a new entity from the sidebar. But as the model grows (and the state gets more complex with variables like year, currentSelection, chartType etc.) - which I'd also like reflected in the URL - I'd like to make use of MVC and specifically Backbone.js.</p>
  
  <ol>
  <li>So how do I structure this in Backbone?
  
  <ul>
  <li>Should I rewrite my columnChart class (and similar classes)?</li>
  <li>Is there an easy way to detect what has changed in the state and only set the new state using these params?</li>
  </ul></li>
  </ol>
  
  <p>An example of tying the Sidebar, Timeslider and Column chart together - using Backbone - would be much appreciated.</p>
  
  <p>Thanks.</p>