MarionetteJS (Backbone.Marionette) Playground

A base template to use for building Backbone and Marionette applications. http://marionettejs.com

by Cardiff

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.8.8/backbone.marionette.js"></script>
<header>
    
<h1>CompositeView demo</h1>

</header>
</br>
<script type="text/template" id="item">
    <button type="button" class="btn btn-success">Click here!</button>
</script>   

<div id="container"></div>

CSS

li {
    height: 40px;
}
li > button {
    float: right;
}

JavaScript

// Itemview
var itemView = Marionette.ItemView.extend({
    initialize: function() {
        var view = this;
        view.listenTo(view, "menu:performAction", view.performActionFromListenTo);   
    },
    template: "#item",
    triggers: {
        "click .btn": "menu:performAction"
    },
    events: {
        "menu:performAction": "performAction"
    },
    performAction: function() {
        console.log('test');
    },
    performActionFromListenTo: function() {
        console.log('test2');
    }
});

// Create a region
var rm = new Marionette.RegionManager();
rm.addRegion("container", "#container");

// Create instance of itemView view
var itemViewInstance = new itemView();

// Test with 'on'
itemViewInstance.on("menu:performAction", function() {
    console.log('callback from .on listener!');
});

// Show the collectionView
rm.get('container').show(itemViewInstance);