Backbone.js - where to store state information?

I'm new to Backbone.js, and I'm trying to figure out where state variables should live. My use case:

I have an application that provides a reading interface for a book (I know, classic example, right?). My models are Book and Page with collection classes for each. The structure of the application looks roughly like this (forgive the ASCII visio):

+------------+
| Controller |
+------------+
    |      Views                 Models
    | +--------------+      +----------------+
    |-|  IndexView   |------| BookCollection |
    | +--------------+      +----------------+
    |                               |
    | +--------------+      +----------------+
    +-|   BookView   |------|     Book       |
      +--------------+      +----------------+
       |                            |
       | +--------------+           |
       |-|  TitleView   |-+         |
       | +--------------+ | +----------------+
       |                  +-|     Page       |
       | +--------------+ | +----------------+ 
       +-|   PageView   |-+
         +--------------+ 

That is, the Controller instantiates and coordinates two views, IndexView and BookView, backed by the models. The BookView instantiates and coordinates a set of subviews (there are actually more than shown here).

State information includes:

• the current book (pointer or id)
• the current page (pointer or id)
• other UI state variables, such as whether images on the page are visible or not, whether other widgets are open or closed, etc.

My question is, where should this state information live? Possible options include:

• The models, which could be state-aware. This makes some sense, since they're intended to store data and views cou