JSFiddle - React, Tailwind, and code Playground

by flakas

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>

JavaScript

BlockModel = Backbone.Model.extend({
    
});

ContainerBlockModel = BlockModel.extend({
    initialize: function() {
        _.defaults(this, {
            type: 'container',
            orientation: 'vertical',
            blocks: new BlockCollection(),
        });
    },
    parse: function(response) {
        if (response.type === 'container' && _.has(response, 'blocks')) {
            this.blocks = new BlockCollection(response.blocks, {
                parse: true,
            });
        }
    },
});

ImageBlockModel = BlockModel.extend({
    defaults: {
        type: 'image',
        src: '',
        width: 0,
        height: 0,
    },
});

TextBlockModel = BlockModel.extend({
    defaults: {
        type: 'text',
        text: '',
    },
});

BlockCollection = Backbone.Collection.extend({
    model: BlockModel, 
    parse: function(response) {
        var self = this;
        _.each(response, function(block) {
            switch (block.type) {
                case 'text': self.add(new TextBlockModel(block)); break;
                case 'image': self.add(new ImageBlockModel(block)); break;
                case 'container': self.add(new ContainerBlockModel(block)); break;
                    
            }
        });
    },
});

var container = new ContainerBlockModel({
    type: 'container',
    orientation: 'vertical',
    blocks: [
        {
            type: 'image',
            src: 'google',
            width: 20,
            height: 15,
        },
        {
            type: 'container',
            orientation: 'horizontal',
            blocks: [
                {
                    type: 'image',
                    src: 'yahoo',
                    width: 5,
                    height: 3,
                },
                {
                    type: 'text',
                    text: 'Heyoo',
                },
            ],
        },
    ],
}, {parse: true});
/*container.blocks.reset({
    type: 'container',
    orientation: "horizontal",
   ...