Search code examples
javascriptmarionette

Marionette.js 2.4.1 - tagName not working

I'm trying to follow a tutorial for Marionette.js but I ran into an issue I don't know how to solve. Given the code below, I'm expecting to see the view rendered as a child of the #insertion-point element, wrapped in a h1 tag.

By looking at the DOM with Chrome's inspector I can see the view is indeed rendered as a child of #insertion-point, but not in a h1 tag.

Did I misunderstood how it should work or is it a bug? There is no error in the console.

Thanks!

The code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Marionette Contact Manager</title>
    <link href="./lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="./css/application.css" rel="stylesheet">
</head>

<body>

    <div id="insertion-point"></div>


    <!-- TEMPLATES -->

    <script type="text/template" id="template">
        <p>Template text</p>
    </script>


    <!-- SCRIPTS -->

    <script src="./lib/jquery/jquery.js"></script>
    <script src="./lib/json2/json2.js"></script>
    <script src="./lib/underscore/underscore.js"></script>
    <script src="./lib/backbone/backbone.js"></script>
    <script src="./lib/marionette/backbone.marionette.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.js"></script>


    <!-- MARIONETTE APP -->

    <script type="text/javascript">

    var ContactManager = new Marionette.Application();

    ContactManager.StaticView = Marionette.ItemView.extend({
        template: '#template',
        el: '#insertion-point',
        tagName: 'h1'
    });

    ContactManager.on('start', function() {
        var staticView = new ContactManager.StaticView();
        staticView.render();
    });

    ContactManager.start();

    </script>
</body>
</html>

And the result:

Chrome Inspector

Solution

  • You either need to make h1 a part of the template and render it in el (so tagName property is ommitted) or 'insert' the rendered view (constructed with tagName, className, id and attributes properties [without el property]) in html somewhere.

    link:

    this.el can be resolved from a DOM selector string or an Element; otherwise it will be created from the view's tagName, className, id and attributes properties. If none are set, this.el is an empty div, which is often just fine.