MarionetteJS timing + CSS transitions

Fun with timings and marionette http://marionettejs.com

by Steven Senkus

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>
<header>
    
<h1>A Marionette Playground</h1>

</header>
<article id="main"></article>
<script type="text/template" id="sample-template">

new Date().toString(), setInterval(1000ms): <br />   <span id="content"> <%= contentPlacement %></span>
    </script>

CSS

#content{
    transition: color 0.4 ease-in;
  transition: background 0.2s ease,
              padding 0.4s linear, color 0.4s ease;   
    font-size: 20px;
    display: block;
    background-color: #000;
    color: #fff;
    width: 500px;
    margin-left: 30px;
}
.a {
    padding: 10px;
    background-color: #f00;    
    color: #00dd00!important;
}

.b { color: #f70!important; background-color: #f00; padding: 50px;}

.c{
    color: #f0f!important;
    padding: 20px;
}
.d {
    
    color: #009;
    padding: 10px;
    font-size: 30px;
}

JavaScript

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.ItemView.extend({
        template: "#sample-template",
        tagName: 'pre'
    });

    // Define a controller to run this module
    // --------------------------------------

    var Controller = Marionette.Controller.extend({

        initialize: function (options) {
            this.region = options.region
        },

        show: function () {
            var model = new Backbone.Model({
                contentPlacement: "Loading Date...."
            });

            var view = new MainView({
                model: model
            });

            this.region.show(view);
        },
        show2: function (options) {
            console.log('show2 options', options)
            var model = new Backbone.Model({
                contentPlacement: new Date().toString()
            });
            var view = new MainView({
                model: model
            });
            

            console.log(this)
            this.region.show(view);
            var self = this;
            setTimeout(function() {
                console.log(self.region);
            var cls = ['a','b','c', 'd'][options.color()];
            self.region.$el.find('#content').toggleClass(cls  );
            }, 1000);
        }

    });


    // Initialize this module when the app starts
    // ------------------------------------------

    Mod.addInitializer(function () {
        Mod.controller = new Controller({
            region: App.mainRegion
        });
        Mod.controller.show();
    });
});

// Start the appt
// -------------

App.start();
console.log('App', App)
setInterval(function () {
   ...