JSFiddle - React, Tailwind, and code Playground

by f0t0n

HTML

<div id="log" class="log"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>

CSS

.log {
    border: 1px solid #444;
    border-radius: 3px;
    background-color: #eee;
    width: 512px;
    height: 256px;
    overflow: auto;
    padding: 8px 16px;
}

JavaScript

var Log,
    Util,
    Person,
    PeopleCollection,
    log,
    peopleSource,
    people;

Log = function(logContainerElement) {
    this.$log = $(logContainerElement);
    return this;
};
    
Log.prototype.write = function(str) {
    this.$log.html(this.$log.html() + str);
    return this;
};
    
Log.prototype.writeLn = function(str) {
    return this.write(str + '<br>');
};
    
Util = {
    isNotEmpty: function(x) {
        return !!x;
    },
    fullName: function(x) {
        return _([x.firstName, x.middleName, x.lastName])
            .filter(this.isNotEmpty)
            .join(' ');
    }
};

Person = Backbone.Model.extend({
    initialize: function() {
        this.on('change:firstName,change:middleName,change:lastName',
            this._setFullName);
        this._setFullName();
    },
    _setFullName: function() {
        this.set('fullName', Util.fullName(this.toJSON()));
    }
});

PeopleCollection = Backbone.Collection.extend({
    model: Person
});

log = new Log('#log');

peopleSource = [{
    firstName: 'FBatman1',
    middleName: 'MBatman1',
    lastName: 'LBatman1'
}, {
    firstName: 'FBatman2',
    lastName: 'LBatman2'
}];

people = new PeopleCollection(peopleSource);
people.each(function(p) {
    log.writeLn(p.get('fullName'));
});