MarionetteJS (Backbone.Marionette) Playground

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

by Christopher McCulloh

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://rawgithub.com/marionettejs/backbone.wreqr/master/lib/backbone.wreqr.js"></script>
<script src="https://rawgithub.com/marionettejs/backbone.babysitter/master/lib/backbone.babysitter.js"></script>
<script src="https://rawgithub.com/marionettejs/backbone.marionette/master/lib/backbone.marionette.js"></script>
<header>
    <h4>A subview/view trigger event loop playground</h4>
    <p>Open your console and then click the button</p>
</header>

<article id="main">
</article>

<script type="text/html" id="MySubView">
    <button type="button" id="button">Click Me</button>
</script>

<script type="text/html" id="MyView">
    <div id="myRegion"></div>
</script>

JavaScript

var app = new Marionette.Application();

app.addRegions({
    "mainRegion": "#main" 
});

app.module("SampleModule", function(Mod, App, Backbone, Marionette, $, _){
    
    var MySubView = Marionette.ItemView.extend({
        template: '#MySubView',
        events: {
            'click #button': 'sendClick'
        },
        
        triggers: {
            'afterClick': 'afterClick'
        },
        
        initialize: function initialize(){
            this.on('afterClick', this.afterClick);
        },

        sendClick: function(e) {
            e.preventDefault();
            console.log('Good... Use your ventful capabilities boy...');
            //trigger some method in the parent...
            this.trigger('processClick');
        },
        
        afterClick: function(who) {
            console.log("I've been waiting for you... The circle is now complete. When I left you I was the but the sender, now I am the receiver...", who);
        }
    });
        
    var MyView = Marionette.Layout.extend({
        template: '#MyView',
        views: {},
        regions: {
            myRegion: '#myRegion'
        },
                
        onShow: function onShow(){
            this.views.mySubView = new MySubView({ model: this.model }).on('processClick', this.sendBackClick, this);
            this.myRegion.show(this.views.mySubView);
        },
        
        sendBackClick: function(){
            //do some stuff, then, let the child know you're done...
            console.log('heh heh heh heh.... Goood, goooood! Your triggers have made you powerful. Now, fulfil your parents destiny and take the event at my side!!!');
            //use trigger?
            this.views.mySubView.trigger('afterClick', 'from trigger');
            //call method directly?
            this.views.mySubView.afterClick('called directly');
        }
    });
        
        
    var Controller = Marionette.Controller.extend({
         
        initialize: function(options){
  ...