Search code examples
javascriptjqueryhtmlbackbone.jsmarionette

Marionette App not starting and there's no error! What went wrong?

I was trying out David Sulc's gentle intro to Marionette.js (Backbone.js) In almost the very first exercise, I encounter a strange problem. When i run the code in chrome or firefox,i see no error in console but apparently the application has not yet started (otherwise, the text rendered by marionette should have been visible). Similarly, the "console.log" command is showing no response in the console window. Console is absolutely blank. no errors, no warnings. please help.

Here's the code. Please let me know what exactly I'm doing wrong.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" >
    <title>Marionette Test Contacts</title>
    <link rel="stylesheet" href="assets/css/bootstrap.css" />
    <link rel="stylesheet" href="assets/css/application.css" />

</head>

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <span class="brand">Contact manager</span>
            </div>
        </div>
    </div>

    <div id="main-region" class="container">
        <p>Content to hide when app starts.</p>
    </div>

    <script type="text/template" id="static-template">
        <p>This is generated by Marionette app.</p>
    </script>       

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://raw.github.com/douglascrockford/JSON-js/master/json2.js"></script>
    <script src="http://underscorejs.org/underscore.js"></script>
    <script src="http://backbonejs.org/backbone.js"></script>
    <script src="http://marionettejs.com/downloads/backbone.marionette.js"></script>

    <script type="text/javascript">
        var ContactManager=new Marionette.Application();
        ContactManager.on("initialize:after", function(){
            console.log("ContactManager has started!");
            var staticView=new ContactManager.StaticView();
            ContactManager.mainRegion.show(staticView);

        });
        ContactManager.start();
    </script>    
</body>
</html>
Solution

  • I believe that you are mixing up the syntax for two different versions of Marionette.
    If you're using start(), try: 

    ContactManager.on("start", function(){});

    According to the docs, events are:

    • "before:start" / onBeforeStart: fired just before the Application starts and before the initializers are executed.
    • "start" / onStart: fires after the Application has started and after the initializers have been executed.

    https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.application.md