JSFiddle - React, Tailwind, and code Playground

by alexbfree

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<div>I am a div</div>
<ul><li>I am an li</li></ul>

JavaScript

var BaseViewClass = Backbone.View.extend({
    // Overload constructor
    // Not a documented thing in Backbone, but not exactly a hack either
    // But it is so rare, that it is safe to do as long as we call the parent
    // constructor, and anyone who would dare overload the constructor of this
    // class, will do the same thing.
    constructor: function (attributes, options) {
        
        // First copy the original render method
        var origRender = this.render;

        // Reimplement the render method in order to trigger the callbacks
        // We don't define any arguments, because javascript makes available a variable
        // called arguments that contains all arguments passed to a function
        this.render = function (model) {

            // Trigger beforeRender event, passing the view as data
            this.trigger('beforeRender', this);
        
            // set the model based on the passed in parameter
            this.model = model;
            
            // Call the original render function using .apply()
            origRender.apply(this, arguments);
            
            // Trigger afterRender event, passing the view as data
            this.trigger('afterRender', this);
        }
        
        // Call parent constructor. Failure to do so may result in the end of the world
        Backbone.View.prototype.constructor.apply(this, arguments);
    },
});

// So we can instantiate this BaseViewClass directly and just make sure it's
// all wired up properly.
var bc = new BaseViewClass();
bc.on('beforeRender', function (view) {
    console.log('---');
    console.log('Remember to wait 30 minutes after meals before rendering');
    console.log('Here is the view BEFORE rendering');
    console.log(view);
    console.log('and here is the model within the view:');
    console.log(view.model);
    console.log('---');
});
bc.on('afterRender', function (view) {
    console.log('---');
    console.log('When finished rendering,...