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>
<div id="sidebar"></div>

CSS

#sidebar {
    padding: 5px;
}
#sidebar div {
    margin: 5px;
    background: #eee;
    overflow: hidden;
}
.del {
    float: right;
    background: #f00;
}

CoffeeScript

class Item extends Backbone.Model
    name: null

class ItemCollection extends Backbone.Collection
    model: Item

class ItemView extends Backbone.View
    events:
        'click .del': -> @model.destroy()
    initialize: ->
        @model.on('destroy', @remove)
    render: ->
        $(@el).append('<span>' + @model.get('name') + '</span>')
        $(@el).append('<span class="del">X</span>')
        @
    remove: =>
        $(@el).remove()
    
class Sidebar extends Backbone.View
    el: '#sidebar'
    events:
        'click .first': -> @items.first().destroy()
    initialize: (options) ->
        @items = new ItemCollection
        for s in options.items
            @items.add(new Item(name: s))
    render: ->
        $el = $(@el)
        @items.each (item) ->
            $el.append(new ItemView(model: item).render().el)
        $el.append('<button class="first">kill first</button>')
        @

new Sidebar(items: [ 1, 2, 3, 4 ]).render()