JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<person>
    <input type="text" data-source="firstName" />
</person>
<span data-source="firstName"></span>
<button>commit</button>

JavaScript

/**
    data-source poc, getters and setters
*/

var vm = {
    firstName: "Tony"
};

vm.subscribers = {};
var elementsToBind = document.querySelectorAll("[data-source]");
[].forEach.call(elementsToBind, function (element) {
    var key = element.getAttribute("data-source");
    
    if (typeof element.value !== "undefined") {
        element.value = vm[key];
        element.addEventListener("keyup", function () {
            vm[key] = element.value;
        });
    } else {
        var textNode = document.createTextNode();
        textNode.nodeValue = vm[key];
        element.appendChild(textNode);        
    }
    
    vm.subscribers[key] = vm.subscribers[key] || [];
    vm.subscribers[key].push(element);
});

(function () {
    var value = vm.firstName;
    Object.defineProperty(vm, "firstName", {
        get: function () {
            return value;
        },
        set: function (newValue) {
            value = newValue;
            vm.subscribers["firstName"].forEach(function (subscriber) {
                if (typeof subscriber.value !== "undefined") {
                    subscriber.value = value;
                } else {
                    subscriber.firstChild.nodeValue = value;
                }
            });
        }
    });
})();