JSFiddle - React, Tailwind, and code Playground

by Alee

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<table id="members">
  <thead>
    <tr><td>Firstname</td><td>Lastname</td></tr>
  </thead>
  <tbody>
  </tbody>
</table>
<script type="text/template" id="member-template">
    <td><%= firstname %></td><td><%= lastname %></td>
</script>

CSS

td {padding:18px 28px 18px; text-align:center; }
td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}

JavaScript

var member_list_view = Backbone.View.extend({
    el : $('#members'),
    initialize : function() {
        this.model.bind("add", this.render, this);
    },

    render: function() {
        var $tbody = this.$("tbody");
        _.each(this.model.models, function(data) {
            this.$el.append(new member_view({model : data}).render().el);
        }, this);
        return this;
    }
});

var member_view = Backbone.View.extend({
    tagName : "tr",
    template : _.template($("#member-template").html()),

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

var members = Backbone.Model.extend({
    urlRoot: "/get_members",
});

var member_collection = Backbone.Collection.extend({
    model : members,
    url : "/get_members",
});

var m1 = new members({firstname: 'Peter', lastname: 'Parker'});
var m2 = new members({firstname: 'Bruce', lastname: 'Wayne'});
var c = new member_collection([m1, m2]);

var view = new member_list_view({model: c}).render();