Function _createElementSide

src/parsetree/features/bind.js:145–194

* Create a read/write side for a DOM element, auto-detecting the * appropriate property based on element type.

(element, runtime)

 * appropriate property based on element type.
 */
function _createElementSide(element, runtime) {
    var tag = element.tagName;
    var type = tag === "INPUT" ? (element.getAttribute("type") || "text") : null;

    // Radio buttons have unique semantics: the variable holds the group's
    // selected value, not a per-element property.
    if (tag === "INPUT" && type === "radio") {
        var radioValue = element.value;
        return {
            element: element,
            read: function () {
                var checked = runtime.resolveProperty(element, "checked");
                return checked ? radioValue : undefined;
            },
            write: function (value) {
                element.checked = (value === radioValue);
            }
        };
    }

    // Look up property by INPUT:type, then by TAG
    var prop = _bindProperty[tag + ":" + type] || _bindProperty[tag];

    // Contenteditable elements
    if (!prop && element.hasAttribute("contenteditable") && element.getAttribute("contenteditable") !== "false") {
        prop = "textContent";
    }

    // Custom elements with a value property
    if (!prop && tag.includes("-") && "value" in element) {
        prop = "value";
    }

    if (!prop) {
        throw new Error(
            "bind cannot auto-detect a property for <" + tag.toLowerCase() + ">. " +
            "Use an explicit property (e.g. 'bind $var to #el's value')."
        );
    }

    var isNumeric = prop === "valueAsNumber";
    return {
        element: element,
        read: function () {
            var val = runtime.resolveProperty(element, prop);
            return (isNumeric && val !== val) ? null : val;
        },
        write: function (value) { element[prop] = value; }
    };
}

/**
 * Create a read/write side for a parsed expression (variable, attribute, class, etc).