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>
<script type="text/data" id="mockData">
location_icon=../../abc/test.png
right_nav_arrow_image=assets/images/arrow.png
right_nav_arrow_image_visible=true
</script>

JavaScript

// Define a Backbone.Model that host each ResourceBundle
var ResourceBundleModel = Backbone.Model.extend({
    defaults: function() {
        return {
            name: null,
            value: null
        };
    }
});

// Define a collection of ResourceBundleModels.
var ResourceBundleCollection = Backbone.Collection.extend({
    // Each collection should know what Model it works with, though
    // not mandated, I guess this is best practice.
    model: ResourceBundleModel,
    
    // Replace this with your URL - This is just so we can demo
    // this in JSFiddle.
    url: '/echo/html/',
    
    parse: function(resp) {
        // Once AJAX is completed, Backbone will call this function
        // as a part of 'reset' to get a list of models based on
        // XHR response.
        var data = [];
        var lines = resp.split("\n");
        
        // I am just reusing your parsing logic here. :)
        for (var i=0; i<lines.length; i++) {
            if (lines[i].length > 5) {
                var _arr = lines[i].split("=");
                
                // Instead of putting this into collection directly,
                // we will create new ResourceBundleModel to contain
                // the data.
                data.push(new ResourceBundleModel({
                    name: $.trim(_arr[0]),
                    value: $.trim(_arr[1])
                }));
            }    
        }
        
        // Now, you've an array of ResourceBundleModel. This set of
        // data will be used to construct ResourceBundleCollection.
        return data;
    },
    
    // Override .sync so we can demo the feature on JSFiddle
    sync: function(method, model, options) {
        // When you do a .fetch, method is 'read'
        if (method === 'read') {
            var me = this;
            
            // Make an XHR request to get data
            // Replace this code with your own code
            Backbone.ajax({
                url: this.url,
            ...