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() {
    App.Search = Backbone.Model.extend({
        url: '/echo/json/'
    });
}());

(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 search = new App.Search();

            search.on('change', function() {
                console.log(search.toJSON());
            });

            var payload = {
                language: App.settings.language,
                term: $('#term').val(),
                db: $('#species').val()
            };

            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',
                            size: 'Gene Size',
                            mrnaSize: 'mRNA Size',
                            proteinSize: 'Protein size',
                            bases: 'bases',
                            aminoAcids: 'amino acids'
                        }
                    }),
      ...