JSFiddle - React, Tailwind, and code Playground

by radu

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<input type="text" id="term" value="test" />
<input type="submit" id="search" />
<input type="text" id="species" value="test" />
<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.genes);        
        }
    });
    
    // 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(),
                db: $('#species').val()
            };

            App.models.search.fetch({
                // weird data format only for jsfiddle echo
                data: {
                    json: JSON.stringify({
                        genes: [{
                            symbol: 'DSCAM',
                            geneId: '1826'
                        }, {
                            symbol: 'DSCAML1',
                            geneId: '57453'
                        }],
                        lang: {
                            officialSymbol: 'Official symbol',
                            name: 'and Name',
                            chromosome: 'Chromosome',
                            location: 'and Location',
                            geneId: 'Gene ID',
      ...