First Demo Flip Book

Displaying a Static View
Now that we have the basics set up, let’s use Marionette to display content in our index.html.
We’ll start by putting everything within the HTML file. But as you can guess, this approach isn’t
advisable for anything beyond a trivial application: you’d lose your mind. So we’ll quickly get around
to refactoring our simple application into something more robust.
Let’s start by adding some javascript code at the bottom of our index.html:
1
2 var ContactManager = new Marionette.Application();
3
4 ContactManager.start();
5
What did we do? Nothing really exciting: we simply declared a new Marionette application, then
started it. If you refresh the index.html page in your browser, you’ll see absolutely nothing has
changed… This isn’t surprising: our application doesn’t do anything yet.
Let’s now make our app display a message to the console once it has started:
1
2 var ContactManager = new Marionette.Application();
3
4 ContactManager.on("initialize:after", function(){
5 console.log("ContactManager has started!");
6 });
7
8 ContactManager.start();
9
Note we’ve defined the initialize:after handler code before we start the application.
If you refresh the page with (e.g.) Firebug’s console open, you’ll see the message we’ve just added.
How about we make the app do somehting a little more useful (and visual) by displaying some static
content?
Before we can have our app do that, we need to fulfill a few preconditions: