JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="https://rawgithub.com/Rich-Harris/Ractive/master/release/0.3.3/Ractive.min.js"></script>
<script id="tpl" type="text/ractive">
{{ ( person.fullName() ) }}
    <input type="button" value="Click" proxy-click="go"/>
</script>
<div id="app"></div>

JavaScript

var john = {
    first:"jon",
    last: "smith",
    fullName: function() { return this.first + " " + this.last },
    setFirst: function(name) { this.first = name; }
};

var ractive = new Ractive({
    el: 'app',
    template: '#tpl',
    data: {person:john}
});

function patchMethod(keypath, fn) {
    return function() {
        fn.apply(this, arguments);
        ractive.update(keypath);
    };
}

// patch my custom object so the mutator methods are auto-wired to ractive
ractive.data.person.setFirst = patchMethod('person', ractive.data.person.setFirst);

// now i can use it normally
ractive.on("go", function(e) {
    e.context.person.setFirst("JONAH");
});