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

Adding Templates and Views

Explore how to transform static HTML into dynamic templates and views using Marionette.js. This lesson guides you through creating header templates and defining item and composite views to render navigation menus, enhancing your application's interactivity and modularity.

We'll cover the following...

With our models set up, we can move on to changing our index.html file so our header menu will be rendered by Marionette instead of static HTML.

Adding header templates

Here’s what we have now:

PHP
<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner">
        <div class="container">
            <span class="brand" href="#">Contact manager</span>
        </div>
    </div>
</div>
<div id="app-container">
    <div id="main-region" class="container">
        <p>Here is static content in the web page. You'll notice that it gets 
            replaced by our app as soon as we start it.</p>
    </div>
    <div id="dialog-region"></div> 
</div>

We need to remove the header menu in lines 1–7 from the displayed ...