blog - attach view to html

1.js

// attach to static html at element "#navbar-links"
var myview = new MyView( {el: $('#navbar-links')} );

2.js

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">My Application</a>
        </div>

        <div class="collapse navbar-collapse" id="navbar-links">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Monkeys</a></li>
                <li><a href="#gorillas">Gorillas</a></li>
            </ul>
        </div>
    </div>
</nav>

3.js

Module.Controller = Marionette.Controller.extend({
    start: function(){
        this.view = new Module.View( {el: $('#navbar-links')} ); // attach to static html @ that element
    }
});

Module.View = Marionette.ItemView.extend({
    // override: don't really render, since this view just attaches to existing navbar html.
    render: function() {
    }
});

4.js

Module.View = Marionette.ItemView.extend({
    events: {
        'click a': 'onClickLink',
    },

    onClickLink: function(e) {
        this.$('li.active').toggleClass('active', false); // turn previously-selected nav link off
        $(e.target).blur()
            .closest('li').toggleClass('active', true); // turn on new link
    },

    // custom render: don't really render, since this view just attaches to existing navbar html.
    render: function() {
    },
});

5.js

// override: don't really render, since this view just attaches to existing navbar html.
render: function() {
    this.bindUIElements(); // wire up this.ui, if any.
}