Question

My question is mostly conceptual about Backbone.js, but I can mock up some code if my question is unclear.

Consider a case where I have 2 sections on a website. A list of items as one view and another view that has a dropdown to select how the list of items should be sorted. Obviously, the list of items is associated with a collection of models that stores the actual data that populates the list. But I’m unsure the best approach for triggering the collection to be sorted differently when the other view’s dropdown changes. Should I be changing the actual order of the collection, or just render the view in the order that I want in the view?

Also, is it a good idea to use a model for the dropdown to keep track of the state of the dropdown, and bind the list of items view to that model so that I know when to rerender the list of items?

Answer 1

You could take several roads here. Here’s a few:

1. Use a router. The router would hold your views, or at least the top-level view (cleaner), and your dropdown view would trigger a route change, which would pass the information along to the view. Best if you want clean URLs.
2. Make a pointer to the list view in the dropdown view. When the dropdown view receives the change event, it explicitly tells the list view to update. (IMO a terrible approach, but listed here for completeness.)
3. Back everything with models. (Like you suggest in your last question.) The dropdown view would be backed by a model, and the list view could bind to that model’s events. (Again, the list view still has to know about the dropdown model—not ideal.)
4. Make an event manager. When your dropdown recevies a change, you trigger 'sort' and anything that cares can listen to that event. This isn’t a trivial solution but isn’t overly complex either. Your list view could then register its intent to listen to the sort event with the event manager, thereby abstracting the actual view inside the event manager and away from the dropdown view.

1 & 4 are effectively the same thing, just depending on whether you want a router or not.

Basically my heuristic with these sorts of scenarios is “nothing should know about things it doesn’t need to know about.” Applied here, that means that your views shouldn’t know about each other.