Introduction to Marionette.js – The Backbone Framework/

...

/

Static Views

Static Views

Learn how to modify the display using static views and templates in Marionette.

We'll cover the following...

Now that we have the basics set up, let’s use Marionette to display content in our index.html file.

We’ll start by putting everything within the HTML file. However, as you can guess, this approach isn’t advisable for anything beyond a trivial application. So, we’ll quickly get around to refactoring our simple application into something more robust.

Let’s start by adding some JavaScript code in our index.html file:

  <script type="text/javascript">
    var ContactManager = new Marionette.Application();
    
    ContactManager.start();
  </script>
JavaScript code added above

We didn’t do anything really exciting. We simply declared a new Marionette application and then started it. If we run the index.html file by clicking the “Run” button below, we’ll see that absolutely nothing has changed. This isn’t surprising: our application doesn’t do anything yet.

Modifying the display

Now, let’s now make our app display a message to the console once it has started:

Press + to interact
<script type="text/javascript">
var ContactManager = new Marionette.Application();
  ContactManager.on("start", function(){
    console.log("ContactManager has started!");
  });
  
  ContactManager.start();
</script>

Note: We’ve defined the start handler code before we start the application.

How about we make the app do something a little more useful and visual by displaying some static content?
However, before we can have our app do that, we need to fulfill a few preconditions:

  • We need to have a view to display.

  • We need a template to provide to our view so it knows what to display and how to display it.

  • We need to have an area on our page where ...