title: Backbone.js - where to store state information?
body: <p>I'm new to <a href="http://documentcloud.github.com/backbone" rel="noreferrer">Backbone.js</a>, and I'm trying to figure out <strong>where state variables should live</strong>. My use case: </p>
  
  <p>I have an application that provides a reading interface for a book (I know, classic example, right?). My models are <code>Book</code> and <code>Page</code> with collection classes for each. The structure of the application looks roughly like this (forgive the ASCII visio):</p>
  
  <pre><code>+------------+
  | Controller |
  +------------+
      |      Views                 Models
      | +--------------+      +----------------+
      |-|  IndexView   |------| BookCollection |
      | +--------------+      +----------------+
      |                               |
      | +--------------+      +----------------+
      +-|   BookView   |------|     Book       |
        +--------------+      +----------------+
         |                            |
         | +--------------+           |
         |-|  TitleView   |-+         |
         | +--------------+ | +----------------+
         |                  +-|     Page       |
         | +--------------+ | +----------------+ 
         +-|   PageView   |-+
           +--------------+ 
  </code></pre>
  
  <p>That is, the <code>Controller</code> instantiates and coordinates two views, <code>IndexView</code> and <code>BookView</code>, backed by the models. The <code>BookView</code> instantiates and coordinates a set of subviews (there are actually more than shown here).</p>
  
  <p>State information includes: </p>
  
  <ul>
  <li>the current book (pointer or id)</li>
  <li>the current page (pointer or id)</li>
  <li>other UI state variables, such as whether images on the page are visible or not, whether other widgets are open or closed, etc.</li>
  </ul>
  
  <p>My question is, where should this state information live? Possible options include:</p>
  
  <ul>
  <li><p>The <strong>models</strong>, which could be state-aware. This makes some sense, since they're intended to store data and views could listen for state changes, but it doesn't seem like this fits the intended Backbone.js pattern, and wouldn't always make sense (e.g. turning image on in the <code>PageView</code> should apply to all pages, not just the current one)</p></li>
  <li><p>A <strong>special singleton model</strong> intended to hold state information. Again, makes sense, easy to listen to, all the views could bind to it - but again, this seems outside standard MVC.</p></li>
  <li><p>The <strong>views</strong>, who are responsible for the UI state - but this would require views to be aware of each other to get state info, which seems incorrect</p></li>
  <li><p>The <strong>controller</strong>, which should route the application between states - this makes sense, but it implies a slightly odd round trip, e.g. <code>User selects "Show Images" --&gt; View event listener is called --&gt; View informs Controller --&gt; Controller updates state --&gt; Controller updates View</code> (rather than the simpler <code>User selects "Show Images" --&gt; View event listener is called --&gt; View updates</code>)</p></li>
  </ul>
  
  <p>I guess in some ways this is a generic MVC question, but I'm having trouble getting my head around it. <strong>What part of the application should be responsible for saving the current state?</strong></p>
  
  <p><strong>UPDATE:</strong> For future reference, I used a global singleton State model for this problem. The UI flow goes like this:</p>
  
  <ol>
  <li>View UI handlers do nothing but update <code>app.State</code></li>
  <li>My routers also do nothing but update <code>app.State</code> - they're essentially specialized views that display and react to URL changes</li>
  <li>Views listen to changes on <code>app.State</code> and update accordingly</li>
  </ol>
  
  <p>My app is Open Source - you can see the <a href="https://github.com/nrabinowitz/gapvis" rel="noreferrer">code on Github</a>. The relevant piece here is the <a href="https://github.com/nrabinowitz/gapvis/blob/master/app/models/State.js" rel="noreferrer">State model</a>, which I've extended to deal with (de)serializing state for the URL.</p>