JSFiddle - React, Tailwind, and code Playground

by dashk

HTML

<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>

JavaScript

var ListDataModel = Backbone.Model.extend({
    defaults: function() {
        return {
            name: null,
            tags: []
        };
    }
});

var ListDataCollection = Backbone.Collection.extend({
    model: ListDataModel,
    initialize: function() {
        var me = this;
        
        // Expires tag collection on reset/change
        this.on('reset', this.expireTagCache, this);
        this.on('change', this.expireTagCache, this);
    },
    expireTagCache: function() {
        this._cachedTags = null;
    },
    /**
     * Retrieves an array of tags in collection
     * 
     * @return {Array}
     */
    getTags: function() {
        if (this._cachedTags === null) {
            this._cachedTags = _.union.apply(this, this.pluck('tags'));
        }
        
        return this._cachedTags;
    },
    
    sync: function(method, model, options) {
        if (method === 'read') {
            var me = this;
            
            // Make an XHR request to get data for this demo
            Backbone.ajax({
                url: '/echo/json/',
                method: 'POST',
                data: {
                    // Feed mock data into JSFiddle's mock XHR response
                    json: JSON.stringify([
                        { id: 1, name: 'one', tags: [ 'number', 'first', 'odd' ] },
                        { id: 2, name: 'two', tags: [ 'number', 'even' ] },
                        { id: 3, name: 'a', tags: [ 'alphabet', 'first' ] }
                    ]),
                },
                success: function(resp) {
                    options.success(me, resp, options);
                },
                error: function() {
                    if (options.error) {
                        options.error();
                    }
                }
            });
        }
        else {
            // Call the default sync method for other sync method
            Backbone.Collection.prototype.sync.apply(this, arguments);
        }
   ...