JSFiddle - React, Tailwind, and code Playground

by siyegen

HTML

<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<body>
    
</body>

JavaScript

var GridView = Backbone.View.extend({
    tagName: 'div',
    className: 'grid-view',
    initialize: function(){
        _.bindAll(this, 'render', 'okay');        
    },
    events: {
        'click .grid-view': 'okay'
    },
    okay: function(){
        alert('moo');        
    },
    render: function(){
        $(this.el).html('<span>Some Cow</span>');
        return this;
    }
});

var AppView = Backbone.View.extend({
    el: $('body'),
    initialize: function(){
        _.bindAll(this, 'render', 'buildGrid');        
        this.render();
    },
    events: {
        'click button#buildGrid': 'buildGrid'
    },
    render: function(){
        $(this.el).append($('<div>').addClass('gridApp'));
        $(this.el).append('<button id="buildGrid">Build</button>');
    },
    buildGrid: function(){
        var gridView = new GridView();
        this.$('.gridApp').html(gridView.render().el);
    }
    
});

var appView = new AppView();