JSFiddle - React, Tailwind, and code Playground

by zzarcon

HTML

<script src="https://rawgit.com/zzarcon/html-observer/master/src/html-observer.js"></script>
<h1> Hello <b>{{user.firstName}} {{user.lastName}} </b></h1>
<input id="userName" type="text" observes="user.firstName">
<hr>
{{user.fullName}}
<br>
<button id="forceChange">Change value!</button>

CSS

b{color: #aaa;}

JavaScript

var Session = {
    user: {
        firstName: "John",
        lastName: "Smith",
        fullName: function () {
            return this.firstName + ' ' + this.lastName;
        }
    }
};

HtmlObserver.observe(Session);
window.addEventListener("load", function () {
    document.getElementById('forceChange').addEventListener('click', function (e) {
        Session.user.lastName = new Date().getTime();
    });
});