JSFiddle - React, Tailwind, and code Playground

by paulL

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script id="template-list" type="text/template">
    <table>
        <thead>
            <tr>
                <th>First</th>
                <th>Last</th>
            </tr>
        </thead>
        <tbody>
        <% _(models).each(function(model) { %>
        <tr data-cid='<%= model.cid %>'>
            <td><%= model.first %></td>
            <td><%= model.last %></td>
        </tr>
        <% }); %>
        </tbody>
    </table>
</script>

<div id='content'>
    <form>
        <input type='text' name='what' /><br />
        <input type='radio' name='where' value='all' checked /> All
        <input type='radio' name='where' value='first' /> First
        <input type='radio' name='where' value='all' /> LAst
    </form>
</div>

JavaScript

var BaseView = Backbone.View.extend({
    render:function() {
        var html, $oldel = this.$el, $newel;

        html = this.html();
        $newel=$(html);
        
        this.setElement($newel);
        $oldel.replaceWith($newel);

        return this;
    }
});

var ItemView = BaseView.extend({
    events: {
        'click': function() {
            console.log(this.model.get('first'));
        }
    }
});
var CollectionView = BaseView.extend({
	initialize: function(opts) {
        this.template = opts.template;
        this.listenTo(this.collection, 'reset', this.render);
	},
	html: function() {
        var models = this.collection.map(function (model) {
            return _.extend(model.toJSON(), {
                cid: model.cid
            });
        });
        return this.template({models: models});
	},
    render: function() {
        BaseView.prototype.render.call(this);
        
        var coll = this.collection;
        this.$('[data-cid]').each(function(ix, el) {
            new ItemView({
                el: el,
                model: coll.get($(el).data('cid'))
            });
        });

        return this;
    }
});
var FormView = Backbone.View.extend({
    events: {
        'keyup input[name="what"]': _.throttle(function(e) {
             this.model.set('what', e.currentTarget.value);
        }, 200) ,
        'click input[name="where"]': function(e) {
            this.model.set('where', e.currentTarget.value);
        }
    }
});

var Filter = Backbone.Model.extend({
    defaults: {
        what: '',
        where: 'all'
    },
    initialize: function(opts) {
        this.collection = opts.collection;
        this.filtered = new Backbone.Collection(opts.collection.models);
        this.on('change:what change:where', this.filter);
    },
    filter: function() {
        var what = this.get('what').trim(),
            where = this.get('where'),
            lookin = (where==='all') ? ['first', 'last'] : where,
            models;
       ...