JSFiddle - React, Tailwind, and code Playground

by brysmi

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bonsai/0.4.3/bonsai.min.js"></script>
<div id="movie"></div>

JavaScript

//models
var Rect = Backbone.Model.extend({
    urlRoot: "http://test.mcon.go.com/mcon3/restful-api/v1/rectangles/",
    defaults: {
        width: 100,
        height: 100
    }
});

/*
var RectCollection = Backbone.Collection.extend({
    model: Rect,
    url: "http://test.mcon.go.com/mcon3/restful-api/v1/rectangles/"
});
*/

//views

var RectView = Backbone.View.extend({
    initialize: function () {
        this.model.bind("change", this.render, this);
    },
    render: function () {
        var model = this.model;
        // TODO: Move this to a plugin ... could just use canvas, Bonsai, or other ???
        bonsai.run(document.getElementById('movie'), {
            code: function (model) {
                var rect1 = new Rect(model.width, model.height, 100, 100)
                    .addTo(stage);
            },
            width: 400,
            height: 400
        });
    }
});

/*
var RectCollectionView = Backbone.View.extend({
    render: function () {
        this.collection.each(function (model) {
            var view = new RectView({
                model: model
            });
            view.render();
        });
    }
});
*/