JSFiddle - React, Tailwind, and code Playground

by tsareg

HTML

<script src="https://rawgit.com/jashkenas/underscore/1.7.0/underscore-min.js"></script>
<script src="https://rawgit.com/jashkenas/backbone/1.1.2/backbone-min.js"></script>
<script src="https://rawgit.com/mikeric/rivets/v0.6.9/dist/rivets.js"></script>

JavaScript

// override default template settings to make templates look like templates in JRS
_.templateSettings = {
    evaluate:/\{\{([\s\S]+?)\}\}/g,
    interpolate:/\{\{=([\s\S]+?)\}\}/g,
    escape:/\{\{-([\s\S]+?)\}\}/g
};

// Rivets.js adapter for Backbone models
rivets.adapters[':'] = {
    subscribe: function(obj, keypath, callback) {
        return obj.on("change:" + keypath, callback);
    },
    unsubscribe: function(obj, keypath, callback) {
        return obj.off("change:" + keypath, callback);
    },
    read: function(obj, keypath) {
        return obj.get(keypath);
    },
    publish: function(model, keypath, value) {
        model.set(keypath, value);
        return model;
    }
};

// in real world this data comes from server
var i18n = {
	id: "ISBN",
	title: "Title",
	author: "Author",
    save: "Save",
    edit: "Edit"
};

var BookView = Backbone.View.extend({
    el: "<tr>",

    events: {
    	"click button": "edit"
    },

    template: _.template(
    	"<td>{{- model.id }}</td>" +
        "<td>{{- model.title }}</td>" +
        "<td>{{- model.author }}</td>" +
        "<td><button>{{- i18n.edit }}</button></td>"),

    initialize: function() {
    	this.listenTo(this.model, "change", this.render);
    },
    
    render: function() {
        this.$el.html(this.template({
        	model: this.model.toJSON(),
        	i18n: i18n
		}));

        return this;
    },

    edit: function() {
    	this.model.collection.trigger("edit", this.model);
    }
});

var BookCollectionView = Backbone.View.extend({
    // typically templates are loaded from separate template files
    template: _.template(
    	"<table>" +
            "<thead>" +
                "<th>{{- i18n['id'] }}</th>" +
                "<th>{{- i18n['title'] }}</th>" +
                "<th>{{- i18n['author'] }}</th>" +
                "<th></th>" +
            "</thead>" +
            "<tbody>" +
            "</tbody>" +
        "</table>"),

    initialize: function() {
       ...