JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<body>
</body>

CSS

table,td {border:1px solid #000;}

JavaScript

var rowTemplate="<tr><td class='name'><%= name %></td><td class='age'><%= age %></td></tr>";

/** View representing a table */
var TableView = Backbone.View.extend({
    tagName: 'table',
    
    initialize : function() {
        _.bindAll(this,'render','renderOne');
        
    },
    
    render: function() {
        this.collection.each(this.renderOne);
        return this;
    },
    
    renderOne : function(model) {
        var row=new RowView({model:model});
        this.$el.append(row.render().$el);
        return this;
    }
});

/** View representing a row of that table */
var RowView = Backbone.View.extend({  
    events: {
        "click .age": function() {console.log(this.model.get("name"));}
    },
    
    render: function() {
        var html=_.template(rowTemplate,this.model.toJSON());
        this.setElement( $(html) );
        return this;
    }
});

var data = [
    {'name': 'Oli', 'age': 25},
    {'name': 'Sarah', 'age': 20}];

/** Collection of models to draw */
var peopleCollection = new Backbone.Collection(data);
var tableView = new TableView({collection: peopleCollection});
$("body").append( tableView.render().el );