BB Before/After Render

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>

SCSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

JavaScript

console.clear();

var BaseView = Backbone.View.extend({

    initialize: function() {

        this.render = _.wrap(this.render, function(render) {
            this.beforeRender();
            render();
            this.afterRender();
        });
    },

    beforeRender: function() {
        console.log('Before render');
    },

    render: function() {
        console.log('Inside render');
        return this;
    },

    afterRender: function() {
        console.log('After render');
    }
});

var exampleView = new BaseView().render();