Backbone.js - Help with the static menu approach

Question

I am very new to using Backbone. Please forgive me in advance as I struggle to think of new ways to build web applications.

I am confused about how to use it for elements that are never covered in any textbooks. All textbooks give the basic “here is the model”, “here is the collection of models”, “here is the view that the model uses”, etc. For concepts that we all understand, for example, the subject.

I have these cases, and I'm fine with them, but it's hard for me to figure out how to use Backbone for the next situation.

I have an application to work with (of course). My user interface should have several menus that allow the user to filter boards using things like priority, due date, and other properties. So my filter menu 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 you click a filter, it should highlight and possibly disable another filter. Also, this will lead to an update in my results by searching and re-rendering my to-do list.

So, should these elements be presented only with representations? Are models needed to represent the state of a menu? Should I create a FilterMenuItem model and a FilterMenu model, as well as corresponding views?

Again, I understand the patterns when it comes to models for the subject matter and collection, but I don't understand how to deal with these seemingly simple elements using Backbone.

I appreciate any suggestions or recommendations.

Answer 1

It is important to remember that collections in backbone.js inherit a bunch of interesting functions from underscore.js . It is included in this filter (or select), which allows you to receive only those members of the collection that match your parameters. For instance:

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

If the menu is really static, you can use the case select to determine which page you are on, and therefore which filter to use. Otherwise, you can have an array of objects representing views that 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;}} ] 

Regarding creating a view for your menu items, you need to decide whether the menu is static or not. If so, you can simply hard-code the elements on different controller routes. If this is not the case, then you should probably use the menuItem model collection:

 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 elements dynamically, as well as have parameters created from server specifications (that is, the user can save user folders to be added here) use refresh to avoid unnecessary HTTP calls. Then you can pass this collection to your view and display the elements as you want.

Hope this helps!