JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone-min.js"></script>
<script id="tpl-list-item" type="text/template">
    <li class="pancakes">
        <div>
            <%= stuff %>
        </div>
    </li>
</script>
<ul>
</ul>

CSS

.pancakes {
    background-color: #eee;
    margin: 10px;
}
.pancakes div {
    border: 1px solid black;
}

JavaScript

var V = Backbone.View.extend({
    template: _.template($('#tpl-list-item').html()),
    events: {
        'click': 'clicked'
    },
    render: function() {
        this.setElement(this.template(this.model.toJSON()));
        return this;
    },
    clicked: function() {
        console.log(this.model.get('stuff'));
    }
});

var i, m, v;
for(i = 0; i < 6; ++i) {
    m = new Backbone.Model({ stuff: i });
    v = new V({ model: m });
    $('ul').append(v.render().el);
}