JSFiddle - React, Tailwind, and code Playground

by Tomek

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<div id='rendered'></div>
<script id="tpl1-table" type="text/template">
    <table><caption><%= caption %></caption>
       <thead>
            <tr>
                <th>Row</th > <th> Name </th>
            </tr> </thead>
        <tbody></tbody></table>
</script>
<script id="tpl1-row" type="text/template">
    <td> <%= row %> </td>                
    <td><%= name %></td>
</script>

JavaScript

var ItemView = Backbone.View.extend({
  events: {
    "click td": "show"
  },
  show: function() {
    console.log(this.model.get("name"));
  }
});

var Test8ItemView = ItemView.extend({
    template: _.template($('#tpl1-row').html()),

    render: function () {
        return this.$el.html(this.template(this.model.toJSON()));
    }
});

var Test8ListView = Backbone.View.extend({
    template: _.template($('#tpl1-table').html()),

    render: function () {
        var table = $(this.template({caption: "Test 8"}) );
        table.find('tbody').html(
            _.reduce(
              this.collection.map(function (model) {
                return (new Test8ItemView({
                  model: model,
                  tagName: 'tr'
                })).render();
              }),
              jQuery.merge
            )
          )
        
        return this.$el.html(table);
    }
});


var data = [];
for (var i = 0, row = 0; i < 100; i++) {
    row = _.random(row + 1, row + 1 + i)
    data.push({
        row: row,
        name: "Row " + row
    });
}

var coll = new Backbone.Collection(data);
var view8 = new Test8ListView({
    collection: coll
});
view8.render()
$("#rendered").append(view8.el);
console.log($("#rendered"))
//.