Nested views with backbone and marionette

TL;DR; Create 2 models and 2 collections and 2 ItemView and 2 CollectionView

Let’s build the classic TODO application, but also let’s group TODOs together.

Create the TODO model:

var Todo = Backbone.Model.extend({
    defaults: {
        title: 'A new TODO'
    }
});

Create the TODO List model:

var TodoList = Backbone.Collection.extend({
    model: Todo
});

Now we want to display our TODO list, so we create an ItemView to display each TODO and a CollectionView to display the list:

var TodoView = Backbone.Marionette.ItemView.extend({
    template: '#todo-template'
});

var TodoListView = Backbone.Marionette.CollectionView.extend({
    template: '#todolist-template',
    childView: TodoView
});

we are using very simple and basic templates:

    <script type="text/template" id="todo-template">
        <div>Title: <%= title %></div>
    </script>

    <script type="text/template" id="todolist-template">
        <div id='todos'>
        </div>
    </script>

It’s time to group TODOs together according to some priority. Backbone does not support nested collections, so we must create an intermediate model with the relative collection:

var Priority = Backbone.Model.extend({
    defaults: {
        todoList: undefined,
        priorityLevel: 'Medium'
    }
});

var PriorityList = Backbone.Collection.extend({
    model: Priority
});

note the the Priority model has an attribute that will hold the relative TODO list. We do not want anything fancy, so we use again basic templates:

    <script type="text/template" id="priority-template">
        <div><%= priorityLevel %> priority todos</div>
        <div class='todolist'>
        </div>
    </script>

    <script type="text/template" id="prioritylist-template">
        <div id='priorities'>
        </div>
    </script>

And finally we create the views:

var PriorityView = Backbone.Marionette.ItemView.extend({
    template: '#priority-template',
    onAttach: function() {
        var todos = this.model.get('todoList'); // Get collection

        var todoListView = new TodoListView({ // Create view for this collection
            collection: todos
        });

        this.$('.todolist').append(todoListView.render().el); // Attach view to the DOM
    }
});

var PriorityListView = Backbone.Marionette.CollectionView.extend({
    template: '#prioritylist-template',
    childView: PriorityView
});

Note that we had to teach our PriorityView to display the inner TodoListView within the onAttach method. This is the only wiring we must do manually. All the rest happens automatically thanks to Backbone and Marionette.