JSFiddle - React, Tailwind, and code Playground

by koba04

HTML

<div><input type="text" class="hoge.bar"></input><span class="hoge.bar"></span></div>
<div><input type="text" class="hoge.baz"></input><span class="hoge.baz"></span></div>

JavaScript

target = {
    hoge: {
        bar: "foo",
        baz: "foofoo"
    }
};

var dataBinding = function(target) {
    for (name in target) {
        console.log("name" + name);
        Object.observe(target[name], (function(name) {
            return function(change) {
                conosole.log(change);
                list = document.querySelectorAll("span." + name + "." + change.name);
                [].forEach.call(list, function(el) {
                    console.log(el);
                    el.innerText = change[0].object.hoge;
                });
                input = document.querySelectorAll("input." + name + "." + change.name);
                [].forEach.call(input, function(el) {
                    el.addEventListener('keyup', function(e) {
                        target[name] = e.target.value;
                    });
                });
            }
        })(name));
    }
};

dataBinding(target);


target.hoge.bar = 'barbar';
setTimeout(function() { target.hoge.bar = "yeah" }, 1000);