JSFiddle - React, Tailwind, and code Playground

by revathskumar

HTML

<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<script src="https://raw.github.com/documentcloud/underscore/master/underscore-min.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/master/backbone-min.js"></script>
<form id="new-status">
<textarea name='status'></textarea>
<input type="submit" />
</form>
<div id="statuses">
      <h2>Monologs</h2>
      <ul></ul>
    </div>

JavaScript

var events = _.clone(Backbone.Events);

var Statuses = function() {

};

Statuses.prototype.add = function(text) {
    $.ajax({
        url: '/echo/json/',
        type: 'POST',
        dataType: 'json',
        data: {
            json: $.toJSON({
                text: text
            }),
            delay: 3
        },
        success: function(response) {
            events.trigger('submit:add', response.text);
        }
    });
};


var statusView = Backbone.View.extend({
    initialize: function(options) {
        this.el = options.el;
        events.on('submit:add', this.appendText, this);
    },
    appendText: function(text) {
        this.el.append('<li>' + text + '</li>');
    }
});

var NewStatusView = Backbone.View.extend({
    initialize: function(option) {
        this.statuses = option.statuses;
        this.el = option.el;
        events.on('submit:add', this.clearText, this);

        var statuses = $.proxy(this.addStatus, this);
        this.el.submit(statuses);
    },
    addStatus: function(e) {
        e.preventDefault();
        this.statuses.add(this.$('textarea').val());
    },
    clearText: function() {
        this.$('textarea').val('');
    }
});

jQuery(function($) {
    var status = new Statuses();
    var StatusForm = new NewStatusView({
        el: $('#new-status'),
        statuses: status
    });
    var statusList = new statusView({
        el: $('#statuses')
    });
});