0

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?

Student of Hogwarts
  • 1,108
  • 3
  • 14
  • 28

1 Answers1

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.

neebz
  • 11,465
  • 7
  • 47
  • 64
  • Hmm, as I've understood it, Spine and Backbone are both very similar in terms of use cases. But my problem is that I can fetch everything with Model.fetch(), but I only want to fetch about 10 records, not all of the 1000 menus I have! (There aren't many variables, but there are generated a lot of menus to make it human readable..) So I need to make my own method to fetch only the records I need, but then I'm basically rejecting every feature of Spine.js and implement my own, so why use it in the first place. I think I'm going to go without any MVC framework and just use my own, because it's ki – Student of Hogwarts Feb 05 '13 at 13:32
  • nd of a hybrid. Somewhat an app, somewhat a website... So everything has to be fetched from the server at all times... – Student of Hogwarts Feb 05 '13 at 13:33
  • you can pass parameters to `fetch`. you have some criteria of fetching menu right ? For example you just want top most menu (which have no parent) ..you can do something like `menu.fetch({data: { parent_id: null}})`. This way you only fetch required items on every user click. So first time clicks will fetch data but after that every thing will be stored locally. – neebz Feb 05 '13 at 13:35
  • I don't know if this is possible in Spine, but I can implement it anyway. But I'm thinking that since I'm NEVER going to do anything but fetching records, there isn't any point of using Spine.js or Backbone.js. Do you agree, or do you think it still has any benefits? – Student of Hogwarts Feb 05 '13 at 13:41
  • Spine supports sending parameters. Check 'Custom Requests' in http://spinejs.com/docs/ajax . Saying that one of the benefits of client-side frameworks is that it gives structure to your javascript code. Otherwise you'll end up with plethora of javascript spread around. If it's just menus, then I think you could manage it without a framework but would you need to add more client side functionality down the road? Do you think your javascript will grow? If yes, then it's a bit of learning curve but you'll thank yourself later. – neebz Feb 05 '13 at 13:51
  • Okay, thanks for your replies! Well, I'm going to have picture galleries, video playlists and articles on the webpage, so I don't think it's going to be a problem. If I were to make a complete app like GMail, of course, but this is just for the menu. The rest is going to be (pre)loaded with AJAX all the time because there is way to much data to store locally anyway. And besides, the models would only store information, it would never update anything to the server. It's a view-website where the users view the contents, they never modify it at all... So I suppose this isn't neccecary here. – Student of Hogwarts Feb 05 '13 at 13:56