Introduction to Marionette.js – The Backbone Framework/

...

/

Highlighting the Active Header

Highlighting the Active Header

Learn how to add the functionality of highlighting the currently active header by turning it from grey to white.

We'll cover the following...

Right now, our header menu looks like this:

Press + to interact
Our current menu
Our current menu

We’d like it to look like this:

Press + to interact
The menu with the active header highlighted
The menu with the active header highlighted

Note: Depending on the screen, you may not be able to readily notice the difference. In the second image, the “About” header is white, while in the first one, it’s grey like the other headers.

Setting up the currently active header

The first thing we need is a method in our header controller to set the currently active header:

Press + to interact
List.Controller = { 
    listHeader: function(){
        // code omitted for brevity
    },
    setActiveHeader: function(headerUrl){
        var links = ContactManager.request("header:entities"); 
        var headerToSelect = links.find(function(header){
        return header.get("url") === headerUrl;
        });
        headerToSelect.select();
        links.trigger("reset"); 
    }
};

After getting our header collection in line 7, ...