Introduction to Marionette.js – The Backbone Framework/

...

/

Implementing the Controller and Sub-Application

Implementing the Controller and Sub-Application

Learn how to add a controller for the new header sub-application.

We'll cover the following...

Adding the List controller

With the data and display portions ready, let’s add the controller:

Node.js
ContactManager.module("HeaderApp.List", function(List, ContactManager,
Backbone, Marionette, $, _){
    List.Controller = {
        listHeader: function(){
            var links = ContactManager.request("header:entities");
            var headers = new List.Headers({collection: links});
            ContactManager.regions.header.show(headers);
        }
    };
});

Now, we need to display our header menu:

Node.js
ContactManager.module("HeaderApp", function(Header, ContactManager, 
Backbone, Marionette, $, _){
    var API = {
        listHeader: function(){
        Header.List.Controller.listHeader();
        }
    };
    ContactManager.commands.setHandler("set:active:header", function(name){
        ContactManager.HeaderApp.List.Controller.setActiveHeader(name);
    });
    Header.on("start", function(){
        API.listHeader();
    });
});

We’ve implemented a command handler in lines 9–11 so other sub-apps can command our header to highlight a different entry.

Tip: What’s the difference ...