MarionetteJS (Backbone.Marionette) Playground

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

by Simon Dion

HTML

<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>
<h2>The container</h2>
<div id="container"></div>

JavaScript

var SomeExtendedView = Marionette.ItemView.extend({
    events: {
        'click button.remove':'remove',   
    },
});
var JohnView = SomeExtendedView.extend({
    template: _.template('<div><p>I\'m a <em>John view</em> <button class="remove">Remove me</button></p></div>'),
});
var DoeView = SomeExtendedView.extend({
    template: _.template('<div><p>I\'m a <strong>Doe view</strong> <button class="remove">Remove me</button>'),
});
var SimpleView = Backbone.View.extend({
    initialize: function(){
        Backbone.View.prototype.initialize.apply(this, arguments);
        this.$el.bind('click', _.bind(this.remove, this));
    },
    render: function(){
     this.$el.html('<div><p>Simple view. <strong>Click on me to remove</strong></p></div>');   
     return this;
    }
});

var container = {
    el: $('#container'),
    views: null,
    add: function(view){
        if(!this.views)this.views = [];
        this.el.append(view.render().el);
        view.$el.bind('remove', _.bind(this.onRemove, this));
    },
    onRemove : function(element){
        console.log('Element ' + element + ' has been removed!');    
    }
}

container.add(new JohnView());
container.add(new DoeView());
container.add(new SimpleView());