JSFiddle - React, Tailwind, and code Playground

by Steven Bey

JavaScript

Object.prototype.forEach = function (callback, thisArg) {
    Object.keys(this).forEach(function (key) {
        if (this.hasOwnProperty(key)) callback.call(thisArg || this, this[key], key);
    }, this);
};

function BindingContext(container, key) {

    if (!container) throw new Error("Must provide a containing object.");

    var data = (key || key === 0) ? container[key] : container, elements = [];
    
    this.children = {};

    if (typeof data === "object" && data) {
        data.forEach(function(_, key) { this.children[key] = new BindingContext(data, key); }, this);
        if (key || key === 0) data.__context__ = this;
    }

    this.attach = function (element) { elements.push(element); };
    //this.detach = function (element) { elements.splice(elements.indexOf(element), 1); };
    this.notify = function () {
        var _ = !data;
        data = arguments[0];
        elements.forEach(function (element) { element.__bind__(data, _ ? data && data.__context__ : undefined); });
    };

    if (key || key === 0) {
        Object.defineProperty(container, key, {
            get: function () { return data; },
            set: this.notify
        });
    }
}
var data = {
	item: null,
	items: [
  	{ name: "test1" },
  	{ name: "test2" }
  ]
}
//data.item = data.items[0];

console.log(new BindingContext(data));