JSFiddle - React, Tailwind, and code Playground

by emir

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<input type="text" id="term" value="test" />
<input type="submit" id="search" />
<div id="results"></div>

JavaScript

App = window.App || {
    collections: {},
    models: {},
    views: {},
    settings: {
        language: 'en'
    }
};

// individual components are organized as modules so that eventually they
// may be kept in different files
(function() {
    var Search = Backbone.Model.extend({
        url: '/echo/json/',
        parse: function(response) {
            // save lang as attribyte 
            this.set({
                lang: response.lang
            });
            // instantiate a Result model for each item in the
            // response and add to Results collection
            App.collections.results.add(response.results);
        }
    });

    // initialize immediately as only one instance of this model
    // is required
    App.models.search = new Search();
}());

(function() {
    App.SearchView = Backbone.View.extend({
        initialize: function() {
            // is it necessary to pass context here?
            App.collections.results.on('add', this.add, this);
        },
        events: {
            'click #search': 'search'
        },
        search: function() {
            var payload = {
                language: App.settings.language,
                term: $('#term').val()
            };

            App.models.search.fetch({
                // weird data format only for jsfiddle echo
                data: {
                    json: JSON.stringify({
                        results: [{
                            symbol: 'DSCAM',
                            id: '1826'},
                        {
                            symbol: 'DSCAML1',
                            id: '57453'}],
                        lang: {
                            symbol: 'Official symbol',
                            id: 'ID'
                        }
                    }),
                    delay: 0
                },
                // again, jsfiddle echo requires POST requests
                type: 'POST'
            });
        },
        add:...