Question

I am very new at using Backbone. Please forgive me in advance as I am struggling to think in new ways building web apps.

I am confused about how to go about using it for items that are never really covered in any of the tutorials. All the tutorials give the basic “here is a model”, “here is a collection of models”, “here is a view that uses the model”, etc. for entities that we all understand, such as a to-do item.

I do have those cases, and I am doing OK with those, but I am having trouble figuring out how to use Backbone for the following situation.

I have a to-do app (of course.) My UI needs to have several menus that allow the user to filter the to-dos by things like priority, due date, and other properties. So, my filter menus might look like this…

• All To-Dos (100)
• Inbox (15)

• Important (10)
• Someday (15)

• Today (0)
• Tomorrow (6)
• This Week (7)

These are all somewhat static menus, except that when a filter is clicked, it should highlight, and possibly cause another filter to be turned off. Also, this would trigger an update in my results by performing a search and re-rendering my to-do list.

So, should I represent these items with views only? Are models needed to represent the state of the menus? Should I create a FilterMenuItem model and FilterMenu model, and also the corresponding views?

Again, I understand the samples when it comes to a model for a to-do item and a to-do collection, but I am stumped on how to tackle these seemingly simple items using Backbone.

I appreciate any suggestions or guidance.

Answer 1

The important thing to remember here is that collections in backbone.js inherit a bunch of cool features from underscore.js. Included in these is filter (or select), which allows you to get only those members of a collection which match your perameters. For example:

render: function(){
    myCollection.filter(function(item){return item.folder === "inbox"});
}

If the menus are actually static, then you can use a case select statement to determine which page you are on & therefore which filter to use. Otherwise, you can have an array of objects representing the views, which describe how to filter, i.e.:

[
    {view: "all", filter: function(item){return item;}}.
    {view: "inbox", filter: function(item){return item.foler === "inbox";}}, 
    {view: "important", filter: function(item){return item.type === "important;}}
]

As far as producing the view for your menu items goes, you have to decide if the the menu is static or not. If it is, then you can simply hard-code the items to different controller routes. If it is not, then you should probably use a collection of menuItem models:

var menuItem = Backbone.Model.extend({});
var menuList = Backbone.Collection.extend({
    model: menuItem
});
var menu = new menuList([{name: "All To-Dos", url: "#!/all"}, {name: "index", url: "#!/index"}]);

which you can add or remove items to dynamically, as well as having the options built from the server specifications (i.e. the user may be able to save custom folders, which will get added here) use the refresh command to avoid unneccesary http calls. Then, you can pass this collection to your view, and render the items out however you want.

Hope this helps!