Beysian

by Steven Bey

HTML

<div>
        <div id="viewer">
            <span id="name" class="alert"></span>
        </div>
        <table id="classes">
            <thead>
                <tr>
                    <!-- ReSharper disable once UnknownCssClass -->
                    <th class="a  name">Name</th>
                </tr>
            </thead>
        </table>
        <div id="editor">
            <input name="name" />
            <button type="button" id="save">Save</button>
        </div>
    </div>

JavaScript

function BindingContext(container, key, parent) {

    var _ = this, elements = [], $ = !(key === undefined || key === null);

    this.container = $ ? container : null;
    this.key = key;
    this.data = $ ? container[key] : container;

    this.type = typeof this.data;
    this.isArray = container instanceof Array || parent && parent.container instanceof Array;
    this.selector = /*this.type === "function" ||*/ this.isArray ? "." + key : "#" + key + ",[name='" + key + "']";

    this.attach = function (element) { elements.push(element); };
    this.detach = function (element) { elements.splice(elements.indexOf(element), 1); };
    // ReSharper disable once DeclarationHides
    this.notify = function (data) {
        _.data = data;
        elements.forEach(function (element) { element.__bind__(_); });
    };

    if (container && typeof this.data !== "function") {
        var data = this.data;
        Object.defineProperty(container, key, {
            get: function () { return data; },
            set: this.notify
        });
    }
}

// ReSharper disable NativeTypePrototypeExtending
Object.prototype.bind = function(bindings) {
    document.body.__bind__(new BindingContext(this));
};
Object.prototype.forEach = function (callback, thisArg) {
    Object.keys(this).forEach(function(key) {
        this.hasOwnProperty(key) ? callback.call(thisArg || this, this[key], key) : void null;
    }, this);
};
Node.prototype.empty = function () { while (this.firstChild) this.removeChild(this.firstChild); };
HTMLElement.prototype.__bind__ = function (context) {
    var data = context.data;
    switch (context.type) {
        case "boolean":
            this.hidden = !data;
            break;
        case "object":
            if (data instanceof Array) {
                var template = this.template;
                if (!template) {
                    if (this.childElementCount > 1) {
                        template = document.createElement("div");
                       ...