Search⌘ K
Home
Courses
Introduction to Marionette.js – The Backbone Framework

Implementing the Controller and Sub-Application

Explore how to implement controllers and sub-applications in Marionette.js. Understand using command handlers to enable sub-apps to control the header menu and manage navigation events, improving app structure and user interaction.

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 ...