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="view-goes-here"></div>
<script type="text/template" id="actions-template">
<% _.each(actions, function(acs) { %> 
    <a class="btn"><%= acs.label %></a>
<% }); %>
</script>

CSS

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

JavaScript

var acs = [{'label':'input box'},{'label':'text area'}];

var Action = Backbone.Model.extend({});
var ActionCollection = Backbone.Collection.extend({
    model: Action
});
var ActionView = Backbone.View.extend({
    template: _.template($('#actions-template').html()),
    events:{
        "click":"makeInput"
    },
    render:function(){
        $(this.el).html(this.template({
            actions: this.collection.toJSON()
        }));
        $('#view-goes-here').append(this.el);
        return this;
    },
    makeInput:function(){
        alert("im in");
    }
});
var actions = new ActionCollection(acs);
var actionView = new ActionView({collection: actions});
actionView.render();