JSFiddle - React, Tailwind, and code Playground

by gunderson

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.layoutmanager/0.9.5/backbone.layoutmanager.min.js"></script>
<div id="parent-view"></div>

CSS

#child-view {
    width: 90%;
    height: 90%;
    background: #444
}
#child-view-contents {
    width: 90%;
    height: 90%;
    background: #888
}
#parent-view {
    width: 500px;
    height: 500px;
    background: #000
}

JavaScript

var ChildView = Backbone.Layout.extend({
    el: false,
    template: function(){
        return '<div id="child-view-contents"></div>';
    }
});

var ParentView = Backbone.Layout.extend({
    el: "#parent-view",
    template: function(){
        return '<div id="child-view"></div>';
    },
    initialize: function(){
        this.insertViews({
            "#child-view": new ChildView()
        })
    }
});

var parentView = new ParentView();
parentView.render();