JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta6/handlebars.min.js"></script>
<div id="view-goes-here"></div>
<script id="t" type="text/x-handlebars">
{{entries.length}}

<ul>
    {{#each entries}}
        <li>{{name}}</li>
    {{/each}}
</ul>
</script>

CSS

#view-goes-here {
    padding: 50px;
    border: 1px solid black;
}
#view-goes-here li {
    display: block;
    border: 1px solid black;
    background: #eee;
    margin: 5px;
}

CoffeeScript

class M extends Backbone.Model

class C extends Backbone.Collection
    model: M


class V extends Backbone.View
    initialize: ->
        @collection.on('reset', @render, this)
        @template = Handlebars.compile($('#t').html())

    render: ->
        @$el.html(@template(entries: @collection.toJSON()))
        @
        
c = new C([
    {"created_at":"2012-06-28T18:54:28Z","id":1,"name":"Matz","updated_at":"2012-06-28T18:54:28Z","winner":null},
    {"created_at":"2012-06-28T18:54:28Z","id":2,"name":"Yehuda Katz","updated_at":"2012-06-28T18:54:28Z","winner":null}
])

v = new V(collection: c)
$('#view-goes-here').append(v.render().el)