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="master">
    <div id="layout">
        <div>
            <div id="container">
            </div>
        </div>
    </div>
</div>

CSS

#master{
    width: 100%;
    height: 100%;
    background: #444
}

#layout{
    width: 100%;
    height: 100%;
}

.childView{
    width: 100px;
    height: 100px;
    background: #ff0;
}

JavaScript

console.log(Backbone)

var children = [0,1,2,3,4,5];


var ChildView = Backbone.Layout.extend({
    className: "childView",
    afterRender: function(){
        console.log("child view rendered");
    }
});

var childViews = [];
_.each(children, function(){
    childViews.push(new ChildView);  
})

var ParentView = Backbone.Layout.extend({
    el: "#layout",
    views:{
        "#container": childViews  
    },
    initialize: function(){
        
    },
    afterRender: function(){
        this.$el.css({
            backgroundColor: "red"
        });
    }
});

var MasterView = Backbone.Layout.extend({
    views:{
        "#layout": new ParentView()
    },
    el: "#master",
    initialize: function(){
    }
})


var m = new MasterView();
m.render();