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 : {}
};

// individual components are organized as modules so that eventually they
// may be kept in different files

(function() {       
    App.Search = Backbone.Model.extend({
        defaults : {
            language : 'en',
            term : ''        
        },
        url : '/echo/json/',
        fetchResults : function() {
            $.ajax({
                url : this.url,
                type : 'POST',
                dataType : 'json',
                data : {
                    json : JSON.stringify(this.toJSON()),
                    delay : 0
                }
            }).success(function(data) {
                console.log(data);
            });
        }
    });
}());
    
(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({
                language : App.language,
                term : $('#term').val(),
                db : $('#species').val()
            });
            search.fetchResults();
        },
        add : function() {
            // add one or more results to DOM
            _.each(App.results, function(result) {
                var resultView = new ResultView(result);
                $('#results').append(resultView.render().el);
            });                
        }
    });
}());

(function() {
    App.Result = Backbone.Model.extend({
        
        
    });
}());

(function() {
    // holds individual result records
    var Results = Backbone.Collection.extend({
        model : App.Result
    });
    
    App.collections.Results = new Results();
}());

(function() {
    var ResultView = Backbone.View.extend({
        tagName : 'div',
       ...