Is Backbone.js or Spine.js only for "offline" apps where you actively change records client side?

Question

I'm making a website where you have a pretty thin vertical bar all the way to the left that has the main menu on it. This is the only contents you have on the website. Then, when you click a menu item, another bar pops up to the right of the main menu bar. This is the sub-menu. Then you can click on the sub-menu, and the last menu appears. When you click an item on this menu, you get a big box to the right of the last menu that contains the contents of the page. This box often contains a picture gallery or a list of videos (like when you search YouTube).

But, I want this to be very responsive, so I need to cache the menus in localStorage. And so I want to use a kind of MVC pattern. And trying with Spine.js, I loaded the menus into a model MenuModel. Now, I don't want to load in all 1000 menu objects that are available at once, so I need a way to preload just the ones I need.

As I see it, Spine.js isn't a good fit. Am I doing something wrong, or isn't Spine.js made for loading menus etc. like I do here? I mean, no record is ever added client side, neither modified or deleted. Only fetched from the server and stored in the model. Is Spine.js more for apps where you actively change records and syncronize with the server than what I need?

Is it a better idea just to write my own classes?

Answer 1

Not sure about Spine.js but you can do something like in Backbone by creating a model Menu.

Each Menu has reference to parent menu (apart from the one which is on the top).

Whenever you fetch menu items, you store them in local storage.

Whenever user clicks on a menu item, you first check if it's stored in local storage. If yes, show them from local storage else fetch them from server.

Saying that you'll have to think of a strategy to find out when to update your local storage.