Backbone / Marionette JS : navigation region, chan

Question

I'm learning backbone / marionette js and i'm using a boilerplate to do so : https://github.com/BoilerplateMVC/Marionette-Require-Boilerplate-Lite

I have created 2 view (welcome / files) and 2 regions : mains and header.

In my headerRegion there is my navbar and I would like to handle the "active" class of my menu (template: header.html) on change or reload... but I can't figure out what is the best way to do it

I have defined a Region in my App.js :

App.addRegions({
        headerRegion:"header",
        mainRegion:"#main"
});

In my controller i create a new HeaderView on init:

initialize:function (options) {
        App.headerRegion.show(new HeaderView(options));
}

And this is my HeaderView :

define([ 'marionette', 'handlebars', "App", 'text!templates/header.html'],
function (Marionette, Handlebars, App, template) {
    //ItemView provides some default rendering logic
    return Marionette.ItemView.extend({
        template:Handlebars.compile(template),
         initialize: function (options) {
          _.bindAll();
        },
        onRender : function(options){
          $('ul.nav li', this.$el).removeClass('active');
        }
    });
});

});

Thanks for your help :) !

David Sulc David Sulc · Accepted Answer · 2013-07-03T14:18:04

What I do in my book on Marionette is to use Backbone.picky to manage which header model is the active one, and add the proper CSS class in that case. You can see the relevant header model selection here: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/header/list/list_controller.js

And when the user enters the app via a direct URL (e.g. a book mark), I set the proper active header (e.g. https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/contacts_app.js)

Backbone / Marionette JS : navigation region, chan

1 Answers