Question

I’m using Backbone.js to render a list of items. THis is working, I have a model, collection and view.

What I want to do is have a Main Nav & Sub Nav which gives sorting options for the list items.

The Main nav is just two items so I have that hard coded on the page. For the sub nav, I would like to render that dynamically based on the Main Nav selection. The sub nav items are static.

I set an event to observe when the MainNav item changes:

events : {
    "click #items-main-nav" : "onNavMainClick"
},

My question is, where do I define the subnav items for the two Main Nav items? And how to I render them. And where should this all live in the backbone.js view file?

Thanks

Answer 1

You will have one view that renders the subNav container, inside the subNav container you will insert a template depending on the item selected on the MainNav. I think it should look like the below….

var subNav = Backbone.View.extend({

  tagName: "div",

  events: {
    "click #items-main-nav" : "onNavMainClick"
  },

  onNavMainClick : function(event){
    //determine which item they clicked on the main nav
    //and call render with correct paramters
    render(option);
  },

  render: function(option) {

    $(this.el).html(option.template(this.model.toJSON()));
    return this;
  }

});