JSFiddle - React, Tailwind, and code Playground

by bartek

HTML

<script src="https://raw.github.com/marionettejs/backbone.wreqr/master/lib/backbone.wreqr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.1.0-bundled/backbone.marionette.min.js"></script>
<link rel="stylesheet" href="netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<article id="main">
</article>

<script type="text/html" id="layout-template">
  Layout Template
    <div id="childRegion"</div>
</script>
<script type="text/html" id="child-template">
    <button type="button" id="btn" >Click me :)</button>
</script>

JavaScript

// Define the app and a region to show content
// -------------------------------------------

var App = new Marionette.Application();

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

// Create a module to contain some functionality
// ---------------------------------------------

App.module("SampleModule", function(Mod, App, Backbone, Marionette, $, _){
    
    // Define a view to show
    // ---------------------
    
    var MainView = Marionette.Layout.extend({
        template: "#layout-template",
        regions: {
            childRegion: "#childRegion"   
        },
        triggers: {
            "btn:clicked": function (args) {
                // This is never triggered
                alert('clicked caught in layout');   
            }
        }
    });
    
    var ChildView = Marionette.ItemView.extend({
        template: "#child-template",
        triggers: {
            "click #btn": "btn:clicked"   
        },
        onBtnClicked: function (args) {
            alert('clicked caught in child view');
        }
    });
    
    // Define a controller to run this module
    // --------------------------------------
    
    var Controller = Marionette.Controller.extend({
        
        initialize: function(options){
            this.region = options.region
        },
        
        show: function(){
            var layout = new MainView({});
            layout.on("show", function (args) {
                var childView = new ChildView({});
                layout.listenTo(childView, "btn:clicked", function (args) {
                    alert('caught in layout like this though but not directly in the layout class');
                });
                layout.childRegion.show(childView);
            });
            this.region.show(layout);
        }
        
    });
    

    // Initialize this module when the app starts
    // ------------------------------------------
    
    Mod.addInitializer(function(){
        Mod.controller = new...