JSFiddle - React, Tailwind, and code Playground

by dexygen

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/html" id='tpl'><%=obj.foo%></script>
<div id="foobarbaz"></div>

JavaScript

var obj = new ObjInstance({foo: 'bar'});
var eventBus = $({});
var template = tpl.innerHTML;

eventBus.on('redraw', function() {
    alert('redraw');
});

foobarbaz.innerHTML = _.template(template,{obj, obj});
//obj.foo = 'baz';

function ObjInstance(cfg) {
    for (var key in cfg) {
        this[key] = cfg[key];
        Object.defineProperty(this, key, {
            configurable: true,
            enumerable: true,
            set: function(val) {
                cfg[key] = val;
                eventBus.trigger('redraw');
            },
            get: function() {
                return cfg[key];
            }
        });
    }
}