mushroom-cli 1.2.0-alpha.12 → 1.2.0-alpha.13

package/dist/docs/mt-dom-1.0.js

@@ -1,1025 +1,1268 @@
-"use strict";
-(function () {
-    function MrgiaTemplate() {
-        var _debugMode = false;
-        this.debugMode = function (value) {
-            if (value === undefined)
-                return _debugMode;
-            _debugMode = !!value;
-        };
-        var _domBinders = {};
-        this.registerDomFeature = function (name, fnHandler) {
-            if (typeof name !== "string")
-                throw new TypeError("Dom binder name must be a string");
-            if (typeof fnHandler !== "function")
-                throw new TypeError("fnHandler must be a function");
-            _domBinders[name] = fnHandler;
-        };
-        this.bindDom = function (dom, data, fnPool, session) {
-            if (!dom)
-                return;
-            if (dom.nodeType !== Node.ELEMENT_NODE)
-                return;
-            session = session || {};
-            if (!session.mt)
-                session.mt = this;
-            if (typeof session.scope != "string")
-                session.scope = "";
-            if (typeof session.specialData != "object" && !session.specialData)
-                session.specialData = {};
-            if (dom.dataset) {
-                var mediator = {};
-                var skipInner = undefined;
-                for (var name in _domBinders) {
-                    var config = dom.dataset[name];
-                    if (!config)
-                        continue;
-                    if (typeof config === "string") {
-                        try {
-                            config = JSON.parse(config);
-                        }
-                        catch (e) {
-                            dom.dataset[name + "Error"] = "Parse error";
-                            skipInner = true;
-                            continue;
-                        }
-                    }
-                    if (typeof config !== "object") {
-                        dom.dataset[name + "Error"] = "Invalid configuration";
-                        skipInner = true;
-                        continue;
-                    }
-                    if (!dom.__mt_features)
-                        dom.__mt_features = {};
-                    dom.__mt_features[name] = dom.dataset[name];
-                    _domBinders[name]({
-                        name: name,
-                        dom: dom,
-                        data: data,
-                        fnPool: fnPool,
-                        config: config,
-                        mediator: mediator,
-                        session: session
-                    });
-                    if (mediator.stop)
-                        return;
-                    if (mediator.skipInner)
-                        skipInner = true;
-                    mediator.skipInner = skipInner;
-                }
-                if (skipInner)
-                    return;
-            }
-            for (var i = 0; i < dom.childNodes.length; i++) {
-                this.bindDom(dom.childNodes[i], data, fnPool, session);
-            }
-        };
-        this.rebindDom = function (dom, data, fnPool, session) {
-            if (dom.__mt_features) {
-                for (var name in dom.__mt_features) {
-                    dom.dataset[name] = dom.__mt_features[name];
-                }
-            }
-            this.bindDom(dom, data, fnPool, session);
-        };
-        var _languages = [];
-        var _currentLanguage = null;
-        this.addLanguage = function (language) {
-            if (!language || !language.code || !language.data || typeof language.data !== "object")
-                return;
-            if (_languages.some(function (lang) { return lang.code === language.code; }))
-                return;
-            var lang = { code: language.code, data: language.data };
-            _languages.push(lang);
-            if (_languages.length === 1)
-                _currentLanguage = lang;
-        };
-        this.setCurrentLanguage = function (code) {
-            return _languages.some(function (lang) {
-                if (lang.code === code) {
-                    _currentLanguage = lang;
-                    return true;
-                }
-                return false;
-            });
-        };
-        this.getCurrentLanguage = function () {
-            return _currentLanguage;
-        };
-    }
-    window.mt = new MrgiaTemplate();
-    window.MrgiaTemplate = MrgiaTemplate;
-})();
-(function () {
-    var _dataQueryCharacter = "$";
-    var _specialDataQueryCharacter = "~";
-    var _functionQueryCharacter = "@";
-    var _conditionOperatorCharacter = "$";
-    var _languageQueryCharacter = "#";
-    function encodeHtml(data) {
-        if (data === undefined || data === null)
-            return "";
-        var html = typeof (data) === "string" ? data : data.toString();
-        html = html.replace(/&/g, "&amp;");
-        html = html.replace(/</g, "&lt;");
-        html = html.replace(/>/g, "&gt;");
-        html = html.replace(/"/g, "&quot;");
-        html = html.replace(/'/g, "&apos;");
-        return html;
-    }
-    function fieldComparer(fieldPath, session) {
-        return function (a, b) {
-            var x = findValueForDomStyle({ field: fieldPath, data: a, session: session });
-            var y = findValueForDomStyle({ field: fieldPath, data: b, session: session });
-            return x > y ? 1 : x < y ? -1 : 0;
-        };
-    }
-    function multiFieldComparer(fields, session) {
-        return function (a, b) {
-            for (var m in fields) {
-                if (!m || m.charAt(0) !== "$" || fields[m] !== 1 && fields[m] !== -1)
-                    continue;
-                var x = findValueForDomStyle({ field: m, data: a, session: session });
-                var y = findValueForDomStyle({ field: m, data: b, session: session });
-                if (x > y)
-                    return fields[m];
-                else if (x < y)
-                    return -fields[m];
-            }
-            return 0;
-        };
-    }
-    function checkCondition(x1, op, x2, data, fnPool, session, isRoot) {
-        if (typeof x2 === "function")
-            return x2(x1);
-        switch (op) {
-            case "eq":
-                return x1 == x2;
-            case "gt":
-                return x1 > x2;
-            case "gte":
-                return x1 >= x2;
-            case "lt":
-                return x1 < x2;
-            case "lte":
-                return x1 <= x2;
-            case "ne":
-                return x1 != x2;
-            case "or":
-                {
-                    if (!Array.isArray(x2))
-                        return false;
-                    return x2.some(function (item) {
-                        if (item !== null && typeof item === "object")
-                            return checkConditions(item, x1, fnPool, session, isRoot);
-                        return x1 == item;
-                    });
-                }
-            case "and":
-                {
-                    if (!Array.isArray(x2))
-                        return false;
-                    return x2.every(function (item) {
-                        if (item !== null && typeof item === "object")
-                            return checkConditions(item, x1, fnPool, session, isRoot);
-                        return x1 == item;
-                    });
-                }
-            case "not":
-                return !checkConditions(x2, x1, fnPool, session, isRoot);
-            case "exists":
-                return x2 ? x1 !== undefined : x1 === undefined;
-            case "type":
-                {
-                    switch (x2) {
-                        case "number":
-                        case "string":
-                        case "boolean":
-                        case "function":
-                        case "undefined":
-                            return typeof x1 === x2;
-                        case "null":
-                            return x1 === null;
-                        case "object":
-                            return typeof x1 === x2 && x1 !== null && !Array.isArray(x1);
-                        case "array":
-                            return Array.isArray(x1);
-                        case "regex":
-                            return x1 instanceof RegExp;
-                        case "date":
-                            return x1 instanceof Date;
-                        case "html-element":
-                            return x1 instanceof HTMLElement;
-                    }
-                }
-            case "in":
-                {
-                    if (!Array.isArray(x2))
-                        return false;
-                    return x2.indexOf(x1) !== -1;
-                }
-            case "nin":
-                {
-                    if (!Array.isArray(x2))
-                        return false;
-                    return x2.indexOf(x1) === -1;
-                }
-            case "size":
-                {
-                    if (x1 === undefined || x1 === null || Array.isArray(x1))
-                        return x1 ? x1.length == x2 : x2 == 0;
-                    return false;
-                }
-            case "all":
-                {
-                    if (!Array.isArray(x1) || !Array.isArray(x2))
-                        return false;
-                    return x2.every(function (item) {
-                        return x1.indexOf(item) !== -1;
-                    });
-                }
-            case "mod":
-                {
-                    if (typeof x1 !== "number" || !Array.isArray(x2) || x2.length !== 2)
-                        return false;
-                    return x1 % x2[0] === x2[1];
-                }
-            case "regex":
-                {
-                    if (typeof x1 !== "string")
-                        return false;
-                    var re;
-                    if (typeof x2 === "string") {
-                        re = new RegExp(x1);
-                    }
-                    else if (Array.isArray(x2)) {
-                        if (x2.length)
-                            re = new RegExp(x2[0], x2.length > 1 ? x2[1] : undefined);
-                    }
-                    else if (x2 instanceof RegExp) {
-                        re = x2;
-                    }
-                    return re && re.test(x1);
-                }
-        }
-        return false;
-    }
-    function checkConditions(cond, data, fnPool, session, isRoot) {
-        for (var field in cond) {
-            if (field && field.charAt(0) === _conditionOperatorCharacter) {
-                if (!checkCondition(data, field.substr(1), cond[field], data, fnPool, session, isRoot))
-                    return false;
-            }
-            else {
-                var x1 = isRoot && field && field.charAt(0) === _specialDataQueryCharacter
-                    ? findSpecialCharacter(field.substr(1), session)
-                    : findValueByPath(data, field);
-                var value = cond[field];
-                if (typeof value === "string") {
-                    var fn = value && value.charAt(0) === _functionQueryCharacter ? findFunctionForDomStyle({ field: value, fnPool: fnPool, session: session }) : null;
-                    if (fn && !fn(x1))
-                        return false;
-                    value = findValueForDomStyle({ field: value, data: data, fnPool: fnPool, session: session });
-                    if (!checkCondition(x1, "eq", value, data, fnPool, session))
-                        return false;
-                }
-                else if (value !== null && typeof value === "object") {
-                    if (!checkConditions(value, x1, fnPool, session))
-                        return false;
-                }
-                else {
-                    if (x1 !== value)
-                        return false;
-                }
-            }
-        }
-        return true;
-    }
-    function addEventListener(dom, eventName, handler, useCapture) {
-        if (typeof handler !== "function")
-            return;
-        if (typeof dom.addEventListener == "function")
-            dom.addEventListener(eventName, handler, useCapture);
-        else if (typeof dom.attachEvent == "function")
-            dom.attachEvent("on" + eventName, handler);
-    }
-    function callFunction(dom, data, fnPool, config, session) {
-        var fn = findFunctionForDomStyle({ field: config.fn, fnPool: fnPool, session: session });
-        if (!fn)
-            return;
-        var me = dom;
-        var thisField = config["this"];
-        if (thisField) {
-            if (thisField.charAt(0) === _dataQueryCharacter)
-                me = findDataForDomStyle({ field: thisField, data: data, session: session });
-            else
-                me = findDataForDomStyle({ field: _dataQueryCharacter + thisField, data: window, session: session });
-        }
-        var parametes = Array.isArray(config.data) ? config.data.map(function (item) { return findDataForDomStyle({ field: item, data: data, session: session }); }) : [findDataForDomStyle({ field: config.data, data: data, session: session })];
-        fn.apply(me, parametes);
-    }
-    function findValueByPath(obj, path) {
-        if (obj === undefined || typeof (path) !== "string")
-            return undefined;
-        if (obj === null)
-            return undefined;
-        var seg = path.split(".");
-        var r = obj;
-        var index = 0;
-        if (seg.length > 0 && seg[0] === "this") {
-            index = 1;
-        }
-        for (var i = index; i < seg.length; i++) {
-            if (r === null)
-                return undefined;
-            if (typeof r === "object" || typeof r === "string" || typeof r === "function")
-                r = r[seg[i]];
-            else
-                return undefined;
-        }
-        return r;
-    }
-    function findFunctionForDomStyle(args) {
-        var field = args.field;
-        if (typeof field === "function") {
-            return field;
-        }
-        else if (typeof field === "string") {
-            var fnPool = args.fnPool;
-            var fn = field === "" || field.charAt(0) !== _functionQueryCharacter
-                ? findValueByPath(window, field)
-                : findValueByPath(fnPool, field.substr(1));
-            return typeof fn === "function" ? fn : undefined;
-        }
-        return undefined;
-    }
-    function findDataForDomStyle(args) {
-        var field = args.field;
-        if (typeof field !== "string" || field === "")
-            return field;
-        var data = args.data;
-        if (field.charAt(0) === _dataQueryCharacter) {
-            if (field.length > 1 && field.charAt(1) === _specialDataQueryCharacter) {
-                return findSpecialCharacter(field.substr(2), args.session);
-            }
-            return findValueByPath(data, field.substr(1));
-        }
-        else if (field.charAt(0) === _languageQueryCharacter) {
-            if (field.length === 1)
-                return field;
-            if (field.charAt(1) === _languageQueryCharacter)
-                return field.substr(1);
-            var currentMt = session ? session.mt ? session.mt : mt : mt;
-            var lang = currentMt.getCurrentLanguage();
-            if (!lang)
-                return "";
-            return lang.data[field.substr(1)];
-        }
-        return field;
-    }
-    function mergeData(args) {
-        var mask = args.mask;
-        if (typeof mask !== "string" && typeof mask !== "object" || mask === null)
-            return mask;
-        var data = args.data;
-        var session = args.session;
-        if (typeof mask === "string") {
-            return findDataForDomStyle({ field: mask, data: data, session: session });
-        }
-        if (Array.isArray(mask)) {
-            return mask.map(function (item) {
-                return mergeData({ mask: item, data: data, session: session });
-            });
-        }
-        var obj = {};
-        for (var m in mask) {
-            obj[m] = mergeData({ mask: mask[m], data: data, session: session });
-        }
-        return obj;
-    }
-    function findSpecialCharacter(path, session) {
-        return findValueByPath(session.specialData, path);
-    }
-    function findValueForDomStyle(args) {
-        var field = args.field;
-        var data = args.data;
-        var fnPool = args.fnPool;
-        var preferFunction = args.preferFunction;
-        var session = args.session;
-        var fn;
-        if (typeof field === "string") {
-            if (field === "")
-                return "";
-            switch (field.charAt(0)) {
-                case _dataQueryCharacter:
-                    if (field.length > 1 && field.charAt(1) === _specialDataQueryCharacter) {
-                        return findSpecialCharacter(field.substr(2), session);
-                    }
-                    return findValueByPath(data, field.substr(1));
-                case _functionQueryCharacter:
-                    fn = findValueByPath(fnPool, field.substr(1));
-                    return typeof fn === "function" ? fn : undefined;
-                case _languageQueryCharacter:
-                    var currentMt = session ? session.mt ? session.mt : mt : mt;
-                    var lang = currentMt.getCurrentLanguage();
-                    if (!lang)
-                        return "";
-                    return lang.data[field.substr(1)];
-                default:
-                    if (!preferFunction)
-                        return field;
-                    var gfn = findValueByPath(fnPool, field.substr(1));
-                    return typeof gfn === "function" ? gfn : undefined;
-            }
-        }
-        else if (typeof field === "object") {
-            if (field === null)
-                return null;
-            if ("fn" in field && field.fn) {
-                var value = undefined;
-                if (Array.isArray(field.fn)) {
-                    if (Array.isArray(field.data)) {
-                        for (var i = 0; i < field.fn.length; i++) {
-                            fn = findFunctionForDomStyle({ field: field.fn[i], fnPool: fnPool, session: session });
-                            if (!fn)
-                                break;
-                            var oldValue = session.specialData.pipeline;
-                            session.specialData.pipeline = { result: value };
-                            var p = field.data[i] === undefined || field.data[i] === null ? value : mergeData({ mask: field.data[i], data: data, session: session });
-                            session.specialData.pipeline = oldValue;
-                            if (Array.isArray(field.data[i]))
-                                value = fn.apply(null, p);
-                            else
-                                value = fn(p);
-                        }
-                    }
-                    else {
-                        value = findDataForDomStyle({ field: field.data, data: data, session: session });
-                        field.fn.forEach(function (fnName) {
-                            fn = findFunctionForDomStyle({ field: fnName, fnPool: fnPool, session: session });
-                            if (!fn)
-                                return;
-                            value = fn(value);
-                        });
-                    }
-                }
-                else if (typeof field.fn === "string") {
-                    fn = findFunctionForDomStyle({ field: field.fn, fnPool: fnPool, session: session });
-                    if (fn) {
-                        value = mergeData({ mask: field.data, data: data, session: session });
-                        if (Array.isArray(field.data))
-                            value = fn.apply(null, value);
-                        else
-                            value = fn(value);
-                    }
-                }
-                return value;
-            }
-        }
-        return field;
-    }
-    function bindDomAttr(arg) {
-        var attrs = arg.config;
-        var dom = arg.dom;
-        var data = arg.data;
-        var fnPool = arg.fnPool;
-        var mediator = arg.mediator;
-        var session = arg.session;
-        var skipInner = false;
-        for (var attrName in attrs) {
-            var value = findValueForDomStyle({ field: attrs[attrName], data: data, fnPool: fnPool, session: session });
-            if (attrName === "html") {
-                if (mediator.skipInner)
-                    continue;
-                dom.innerHTML = value;
-                skipInner = true;
-                continue;
-            }
-            else if (attrName === "text") {
-                if (mediator.skipInner)
-                    continue;
-                dom.innerHTML = encodeHtml(value);
-                skipInner = true;
-                continue;
-            }
-            else if (attrName === "value") {
-                if (dom.nodeName === "TEXTAREA")
-                    dom.innerHTML = encodeHtml(value);
-                else
-                    dom.setAttribute(attrName, (value === null || value === undefined) ? "" : value);
-            }
-            else if (attrName.indexOf(".") === -1)
-                dom.setAttribute(attrName, value);
-            else {
-                var segs = attrName.split(".");
-                var cur = dom;
-                for (var i = 0; i < segs.length - 1; i++) {
-                    if (cur === null || typeof cur !== "object") {
-                        cur = null;
-                        break;
-                    }
-                    cur = cur[segs[i]];
-                }
-                if (cur !== null)
-                    cur[segs[segs.length - 1]] = value;
-            }
-        }
-        delete dom.dataset.mtAttr;
-        mediator.skipInner = skipInner;
-    }
-    function bindDomIterate(arg) {
-        var config = arg.config;
-        var dom = arg.dom;
-        var data = arg.data;
-        var fnPool = arg.fnPool;
-        var mediator = arg.mediator;
-        var arr = findValueForDomStyle({ field: config.data, data: data, session: arg.session });
-        if (config.mode !== "key-value" && arr !== null && arr !== undefined && !Array.isArray(arr)) {
-            dom.dataset[arg.name + "Error"] = "Invalid type error: Expected array (field: '" + config.data + "')";
-            mediator.skipInner = stop;
-            mediator.skipInner = true;
-            return;
-        }
-        else if (config.mode === "key-value" && arr !== null && arr !== undefined && typeof arr != "object") {
-            dom.dataset[arg.name + "Error"] = "Invalid type error: Expected object (field: '" + config.data + "')";
-            mediator.skipInner = stop;
-            mediator.skipInner = true;
-            return;
-        }
-        var iterateMe = config.iterateMe === true;
-        var children;
-        if (!iterateMe) {
-            children = [];
-            while (dom.firstChild) {
-                children.push(dom.firstChild);
-                dom.removeChild(dom.firstChild);
-            }
-        }
-        if (!arr) {
-            mediator.skipInner = true;
-            children = null;
-            delete dom.dataset[arg.name];
-            dom.innerHTML = "";
-            return;
-        }
-        var parentIterateScope = arg.session.specialData.iterate;
-        var currentIterateScope = {};
-        if (config.inject && typeof config.inject == "object") {
-            for (var m in config.inject) {
-                currentIterateScope[m] = findDataForDomStyle({ field: config.inject[m], data: data, session: arg.session });
-            }
-        }
-        currentIterateScope.parent = parentIterateScope;
-        arg.session.specialData.iterate = currentIterateScope;
-        var filter = null;
-        if (config.mode !== "key-value") {
-            if (config.filter) {
-                var fnFilter = findFunctionForDomStyle({ field: config.filter, fnPool: fnPool, session: arg.session });
-                if (typeof fnFilter === "function")
-                    filter = fnFilter;
-            }
-            if (config.transform) {
-                var fnTransform = findFunctionForDomStyle({ field: config.transform, fnPool: fnPool, session: arg.session });
-                if (typeof fnTransform === "function") {
-                    var transformedArr = [];
-                    arr.forEach(function (item, idx, array) {
-                        transformedArr.push(fnTransform(item, idx, array, data));
-                    });
-                    arr = transformedArr;
-                }
-            }
-            if (config.sort) {
-                if (typeof config.sort === "string") {
-                    var fnSort = findFunctionForDomStyle({ field: config.sort, fnPool: fnPool, session: arg.session });
-                    if (typeof fnSort === "function")
-                        arr.sort(fnSort);
-                    else if (!fnSort && config.sort.charAt(0) === _dataQueryCharacter)
-                        arr.sort(fieldComparer(config.sort, arg.session));
-                }
-                else if (typeof config.sort === "object") {
-                    arr.sort(multiFieldComparer(config.sort, arg.session));
-                }
-            }
-            delete dom.dataset[arg.name];
-            arr.forEach(function (item, idx, array) {
-                if (filter && !filter(item, idx, array, data))
-                    return;
-                currentIterateScope.index = idx;
-                currentIterateScope.index1 = idx + 1;
-                if (iterateMe) {
-                    var node = dom.cloneNode(true);
-                    dom.parentNode.insertBefore(node, dom);
-                    var oldScope = arg.session.scope;
-                    if (config.scope)
-                        arg.session.scope += "/" + config.scope + "[" + idx + "]";
-                    arg.session.mt.bindDom(node, item, fnPool, arg.session);
-                    if (config.scope)
-                        arg.session.scope = oldScope;
-                }
-                else {
-                    children.forEach(function (child) {
-                        var node = child.cloneNode(true);
-                        dom.appendChild(node);
-                        var oldScope = arg.session.scope;
-                        if (config.scope)
-                            arg.session.scope += "/" + config.scope + "[" + idx + "]";
-                        arg.session.mt.bindDom(node, item, fnPool, arg.session);
-                        if (config.scope)
-                            arg.session.scope = oldScope;
-                    });
-                }
-            });
-        }
-        else {
-            if (config.filter) {
-                var fnFilter = findFunctionForDomStyle({ field: config.filter, fnPool: fnPool, session: arg.session });
-                if (typeof fnFilter === "function")
-                    filter = fnFilter;
-            }
-            delete dom.dataset[arg.name];
-            var idx = 0;
-            var index = 0;
-            for (var key in arr) {
-                if (filter && !filter(key, idx, arr, data)) {
-                    idx++;
-                    continue;
-                }
-                idx++;
-                currentIterateScope.index = index;
-                currentIterateScope.index1 = index + 1;
-                index++;
-                if (iterateMe) {
-                    var node = dom.cloneNode(true);
-                    dom.parentNode.insertBefore(node, dom);
-                    var oldScope = arg.session.scope;
-                    if (config.scope)
-                        arg.session.scope += "/" + config.scope + "[" + key + "]";
-                    arg.session.mt.bindDom(node, { key: key, value: arr[key] }, fnPool, arg.session);
-                    if (config.scope)
-                        arg.session.scope = oldScope;
-                }
-                else {
-                    children.forEach(function (child) {
-                        var node = child.cloneNode(true);
-                        dom.appendChild(node);
-                        var oldScope = arg.session.scope;
-                        if (config.scope)
-                            arg.session.scope += "/" + config.scope + "[" + key + "]";
-                        arg.session.mt.bindDom(node, { key: key, value: arr[key] }, fnPool, arg.session);
-                        if (config.scope)
-                            arg.session.scope = oldScope;
-                    });
-                }
-            }
-        }
-        if (config.oniterated) {
-            var fnOnIterated = findFunctionForDomStyle({ field: config.oniterated, fnPool: fnPool, session: arg.session });
-            if (typeof fnOnIterated == "function") {
-                try {
-                    fnOnIterated.call(dom, arr);
-                }
-                catch (e) {
-                    console.error(e);
-                }
-            }
-        }
-        arg.session.specialData.iterate = parentIterateScope;
-        if (config.inject && typeof config.inject == "object") {
-            for (var m in config.inject) {
-                currentIterateScope[m] = null;
-            }
-        }
-        currentIterateScope.parent = null;
-        currentIterateScope = null;
-        if (iterateMe) {
-            dom.parentNode.removeChild(dom);
-            mediator.stop = true;
-        }
-        mediator.skipInner = true;
-    }
-    function bindDomCond(arg) {
-        var config = arg.config;
-        var dom = arg.dom;
-        var data = arg.data;
-        var fnPool = arg.fnPool;
-        var mediator = arg.mediator;
-        if (typeof config !== "object")
-            return;
-        var r = checkConditions(config, data, fnPool, arg.session, true);
-        if (!r) {
-            dom.parentNode.removeChild(dom);
-            mediator.stop = true;
-            mediator.skipInner = true;
-        }
-        delete dom.dataset[arg.name];
-    }
-    function bindDomEvent(arg) {
-        var config = arg.config;
-        var dom = arg.dom;
-        for (var eventName in config) {
-            var fn = findFunctionForDomStyle({ field: config[eventName], fnPool: arg.fnPool, session: arg.session });
-            if (fn && arg.fnPool && arg.fnPool.__context) {
-                (function (f, eName, context) {
-                    addEventListener(dom, eName, function () {
-                        var length = arguments.length;
-                        arguments.length = length + 1;
-                        arguments[length] = context;
-                        f.apply(this, arguments);
-                    }, false);
-                })(fn, eventName, arg.fnPool.__context);
-            }
-            else
-                addEventListener(dom, eventName, fn, false);
-        }
-        delete dom.dataset[arg.name];
-    }
-    function bindCallFunction(arg) {
-        if (Array.isArray(arg.config)) {
-            arg.config.forEach(function (c) {
-                callFunction(arg.dom, arg.data, arg.fnPool, c, arg.session);
-            });
-        }
-        else
-            callFunction(arg.dom, arg.data, arg.fnPool, arg.config, arg.session);
-        delete arg.dom.dataset[arg.name];
-    }
-    var _mediatorWatcher = {};
-    function realtimeWatchHandler() {
-        var value = this.value || "";
-        var watcherConfig = _mediatorWatcher[this.__mtWatchName];
-        if (!watcherConfig)
-            return;
-        var orphans = null;
-        watcherConfig.realtime.forEach(function (watcherId) {
-            var dom = document.getElementById(watcherId);
-            if (!dom) {
-                if (!orphans)
-                    orphans = [];
-                orphans.push(dom);
-                return;
-            }
-            bindDomAttr({
-                dom: dom,
-                config: dom.__mtWatcherConfig.attr,
-                name: "watchAttr",
-                data: {
-                    value: value
-                },
-                fnPool: dom.__mtWatcherFnPool,
-                mediator: {}
-            });
-        });
-        if (orphans)
-            orphans.forEach(function (removedId) {
-                var idx;
-                while ((idx = watcherConfig.realtime.indexOf(removedId)) !== -1) {
-                    watcherConfig.normal.splice(idx, 1);
-                }
-            });
-    }
-    function watchHandler() {
-        var value = this.nodeName === "INPUT" && (this.type === "checkbox" || this.type === "radio") && !this.checked ? null : this.value;
-        var watcherConfig = _mediatorWatcher[this.__mtWatchName];
-        if (!watcherConfig)
-            return;
-        var orphans = null;
-        watcherConfig.normal.forEach(function (watcherId) {
-            var dom = document.getElementById(watcherId);
-            if (!dom) {
-                if (!orphans)
-                    orphans = [];
-                orphans.push(dom);
-                return;
-            }
-            bindDomAttr({
-                dom: dom,
-                config: dom.__mtWatcherConfig.attr,
-                name: "watchAttr",
-                data: {
-                    value: value
-                },
-                fnPool: dom.__mtWatcherFnPool,
-                mediator: {}
-            });
-        });
-        if (orphans)
-            orphans.forEach(function (removedId) {
-                var idx;
-                while ((idx = watcherConfig.normal.indexOf(removedId)) !== -1) {
-                    watcherConfig.normal.splice(idx, 1);
-                }
-            });
-    }
-    var _watcherIdIndexSeed = 0;
-    function mtWatch(arg) {
-        var name = arg.session.scope + "#" + arg.config.name;
-        var watcherConfig = _mediatorWatcher[name];
-        if (!watcherConfig) {
-            _mediatorWatcher[name] = watcherConfig = {
-                realtime: [],
-                normal: []
-            };
-        }
-        var id = arg.dom.id;
-        if (!id) {
-            arg.dom.id = id = "__mtWatcher_" + _watcherIdIndexSeed;
-            _watcherIdIndexSeed++;
-        }
-        watcherConfig[arg.config.realtime ? "realtime" : "normal"].push(id);
-        arg.dom.__mtWatcherConfig = arg.config;
-        arg.dom.__mtWatcherFnPool = arg.fnPool;
-        delete arg.dom.dataset[arg.name];
-    }
-    function mtDefineWatchee(arg) {
-        var nodeName = arg.dom.nodeName;
-        if (nodeName !== "INPUT" && nodeName !== "SELECT" && nodeName !== "TEXTAREA") {
-            dom.dataset[arg.name + "Error"] = "Cannot define watchee in this element";
-            return;
-        }
-        var name = arg.session.scope + "#" + arg.config.name;
-        arg.dom.__mtWatchName = name;
-        if (this.nodeName === "INPUT" && (this.type === "checkbox" || this.type === "radio")) {
-            addEventListener(arg.dom, "click", realtimeWatchHandler, false);
-            addEventListener(arg.dom, "click", watchHandler, false);
-        }
-        else if (nodeName === "SELECT") {
-            addEventListener(arg.dom, "change", realtimeWatchHandler, false);
-            addEventListener(arg.dom, "change", watchHandler, false);
-        }
-        else {
-            addEventListener(arg.dom, "keyup", realtimeWatchHandler, false);
-            addEventListener(arg.dom, "change", watchHandler, false);
-        }
-        delete arg.dom.dataset[arg.name];
-    }
-    var _mediatorChecker = {};
-    var _validationDefaultMessages = {
-        "%!required%": "Required",
-        "%!maxLength%": "Too long",
-        "%!minLength%": "Too short",
-        "%!min%": "Too small",
-        "%!max%": "Too big",
-        "%!pattern%": "Invalid"
-    };
-    function checkHandler(e) {
-        var value = this.nodeName === "INPUT" && (this.type === "checkbox" || this.type === "radio") && !this.checked ? "" : this.value || "";
-        var messageIds = _mediatorChecker[this.__mtCheckName];
-        if (!messageIds)
-            return;
-        var mtCheckConfig = this.__mtCheckConfig;
-        var errorMsg = "";
-        if (!errorMsg && mtCheckConfig.required && !value) {
-            errorMsg = mtCheckConfig.requiredMessage || "%!required%";
-        }
-        if (!errorMsg && "maxLength" in mtCheckConfig && value !== "" && value.length > mtCheckConfig.maxLength) {
-            errorMsg = mtCheckConfig.maxLengthMessage || "%!maxLength%";
-        }
-        if (!errorMsg && "minLength" in mtCheckConfig && value !== "" && value.length > mtCheckConfig.minLength) {
-            errorMsg = mtCheckConfig.minLengthMessage || "%!minLength%";
-        }
-        if (!errorMsg && "min" in mtCheckConfig && value !== "" && value < mtCheckConfig.min) {
-            errorMsg = mtCheckConfig.minMessage || "%!min%";
-        }
-        if (!errorMsg && "max" in mtCheckConfig && value !== "" && value < mtCheckConfig.max) {
-            errorMsg = mtCheckConfig.maxMessage || "%!max%";
-        }
-        if (!errorMsg && "pattern" in mtCheckConfig && value !== "" && !value.match(new RegExp(mtCheckConfig.pattern, mtCheckConfig.patternOptions))) {
-            errorMsg = mtCheckConfig.patternMessage || "%!pattern%";
-        }
-        if (!errorMsg && "complex" in mtCheckConfig && value !== "") {
-        }
-        if (!errorMsg && "custom" in mtCheckConfig && value !== "") {
-            var fn = findFunctionForDomStyle({ field: mtCheckConfig.custom, fnPool: this.__mtCheckFnPool });
-            if (fn) {
-                var s = fn(value, this, e);
-                if (s && typeof s == "string")
-                    errorMsg = s;
-            }
-        }
-        var orphans = null;
-        messageIds.forEach(function (messageId) {
-            var dom = document.getElementById(messageId);
-            if (!dom) {
-                if (!orphans)
-                    orphans = [];
-                orphans.push(dom);
-                return;
-            }
-            switch (dom.__mtCheckMessageConfig.mode) {
-                case "show-hide":
-                case "showHide":
-                    if (errorMsg) {
-                        if (errorMsg in _validationDefaultMessages)
-                            dom.innerHTML = dom.__mtCheckMessageOriginHtml;
-                        else
-                            dom.innerHTML = encodeHtml(errorMsg);
-                        dom.style.display = "block";
-                    }
-                    else {
-                        dom.innerHTML = "";
-                        dom.style.display = "none";
-                    }
-                    break;
-                case "toggle-class":
-                case "toggleClass":
-                    if (errorMsg) {
-                        if (errorMsg in _validationDefaultMessages)
-                            dom.innerHTML = dom.__mtCheckMessageOriginHtml;
-                        else
-                            dom.innerHTML = encodeHtml(errorMsg);
-                        if (!dom.className) {
-                            dom.className = dom.__mtCheckMessageConfig.toggleClass;
-                            break;
-                        }
-                        var classes = dom.className.split(/\s/);
-                        if (classes.indexOf(dom.__mtCheckMessageConfig.toggleClass) === -1) {
-                            classes.push(dom.__mtCheckMessageConfig.toggleClass);
-                            dom.className = classes.join(" ");
-                        }
-                    }
-                    else {
-                        dom.innerHTML = "";
-                        if (!dom.className)
-                            break;
-                        var classes = dom.className.split(/\s/);
-                        for (var i = classes.length - 1; i > 0; i--) {
-                            if (classes[i] === dom.__mtCheckMessageConfig.toggleClass)
-                                classes.splice(i, 1);
-                        }
-                        dom.className = classes.join(" ");
-                    }
-                    break;
-                default:
-                    var message = _validationDefaultMessages[errorMsg] || errorMsg;
-                    dom.innerHTML = message ? encodeHtml(message) : "";
-                    break;
-            }
-        });
-        if (orphans)
-            orphans.forEach(function (removedId) {
-                var idx;
-                while ((idx = messageIds.indexOf(removedId)) !== -1) {
-                    messageIds.splice(idx, 1);
-                }
-            });
-    }
-    var _checkerIdIndexSeed = 0;
-    function mtCheck(arg) {
-        var nodeName = arg.dom.nodeName;
-        if (nodeName !== "INPUT" && nodeName !== "SELECT" && nodeName !== "TEXTAREA") {
-            arg.dom.dataset[arg.name + "Error"] = "Cannot check this element";
-            return;
-        }
-        var name = arg.session.scope + "#" + arg.config.name;
-        arg.dom.__mtCheckName = name;
-        arg.dom.__mtCheckConfig = arg.config;
-        arg.dom.__mtCheckFnPool = arg.fnPool;
-        addEventListener(arg.dom, this.nodeName === "INPUT" && (this.type === "checkbox" || this.type === "radio") ? "click" : "change", checkHandler, false);
-        addEventListener(arg.dom, "blur", checkHandler, false);
-        delete arg.dom.dataset[arg.name];
-    }
-    function mtCheckMessage(arg) {
-        var name = arg.session.scope + "#" + arg.config.name;
-        var checkerConfig = _mediatorChecker[name];
-        if (!checkerConfig) {
-            _mediatorChecker[name] = checkerConfig = [];
-        }
-        var id = arg.dom.id;
-        if (!id) {
-            arg.dom.id = id = "__mtCheckMessage_" + _checkerIdIndexSeed;
-            _checkerIdIndexSeed++;
-        }
-        checkerConfig.push(id);
-        arg.dom.__mtCheckMessageConfig = arg.config;
-        arg.dom.__mtCheckMessageOriginHtml = arg.dom.innerHTML;
-        delete arg.dom.dataset[arg.name];
-    }
-    mt.builtinFeatures = {
-        mtCond: bindDomCond,
-        mtIterate: bindDomIterate,
-        mtCall: bindCallFunction,
-        mtAttr: bindDomAttr,
-        mtEvent: bindDomEvent,
-        mtWatch: mtWatch,
-        mtDefineWatchee: mtDefineWatchee,
-        mtCheck: mtCheck,
-        mtCheckMessage: mtCheckMessage
-    };
-    mt.fnUtils = {
-        findValueByPath: findValueByPath,
-        findDataForDomStyle: findDataForDomStyle,
-        findFunctionForDomStyle: findFunctionForDomStyle,
-        findValueForDomStyle: findValueForDomStyle,
-        mergeData: mergeData,
-        fieldComparer: fieldComparer,
-        multiFieldComparer: multiFieldComparer,
-        checkCondition: checkCondition,
-        checkConditions: checkConditions,
-        addEventListener: addEventListener
-    };
-    if (typeof formatValue == "function")
-        mt.fnUtils.formatValue = formatValue;
-    for (var feature in mt.builtinFeatures) {
-        mt.registerDomFeature(feature, mt.builtinFeatures[feature]);
-    }
-})();
+(function () {
+    function MrgiaTemplate() {
+        var _debugMode = false;
+        this.debugMode = function (value) {
+            if (value === undefined)
+                return _debugMode;
+            _debugMode = !!value;
+        };
+
+        var _domBinders = {};
+
+        this.registerDomFeature = function (name, fnHandler) {
+            if (typeof name !== "string")
+                throw new TypeError("Dom binder name must be a string");
+            if (typeof fnHandler !== "function")
+                throw new TypeError("fnHandler must be a function");
+            _domBinders[name] = fnHandler;
+        };
+
+
+
+        this.bindDom = function (dom, data, fnPool, session) {
+            if (!dom)
+                return;
+
+            if (dom.nodeType !== Node.ELEMENT_NODE)
+                return;
+
+            session = session || {};
+            if (!session.mt)
+                session.mt = this;
+            if (typeof session.scope != "string")
+                session.scope = "";
+            if (typeof session.specialData != "object" && !session.specialData)
+                session.specialData = {};
+
+            if (dom.dataset) {
+                var mediator = {};
+                var skipInner = undefined;
+                for (var name in _domBinders) {
+                    var config = dom.dataset[name];
+                    if (!config)
+                        continue;
+                    if (typeof config === "string") {
+                        try {
+                            config = JSON.parse(config);
+                        } catch (e) {
+                            dom.dataset[name + "Error"] = "Parse error";
+                            skipInner = true;
+                            continue;
+                        }
+                    }
+                    if (typeof config !== "object") {
+                        dom.dataset[name + "Error"] = "Invalid configuration";
+                        skipInner = true;
+                        continue;
+                    }
+
+                    if (!dom.__mt_features)
+                        dom.__mt_features = {};
+                    dom.__mt_features[name] = dom.dataset[name];
+
+                    _domBinders[name]({
+                        name: name,
+                        dom: dom,
+                        data: data,
+                        fnPool: fnPool,
+                        config: config,
+                        mediator: mediator,
+                        session: session
+                    });
+                    if (mediator.stop)
+                        return;
+                    if (mediator.skipInner)
+                        skipInner = true;
+                    mediator.skipInner = skipInner;
+                }
+                if (skipInner)
+                    return;
+            }
+
+            for (var i = 0; i < dom.childNodes.length; i++) {
+                this.bindDom(dom.childNodes[i], data, fnPool, session);
+            }
+        };
+
+        this.rebindDom = function (dom, data, fnPool, session) {
+            if (dom.__mt_features) {
+                for (var name in dom.__mt_features) {
+                    dom.dataset[name] = dom.__mt_features[name];
+                }
+            }
+            this.bindDom(dom, data, fnPool, session);
+        };
+
+        var _languages = [];
+        var _currentLanguage = null;
+        this.addLanguage = function (language) {
+            if (!language || !language.code || !language.data || typeof language.data !== "object")
+                return;
+
+            if (_languages.some(function (lang) { return lang.code === language.code; }))
+                return;
+
+            var lang = { code: language.code, data: language.data };
+            _languages.push(lang);
+            if (_languages.length === 1)
+                _currentLanguage = lang;
+        };
+
+        this.setCurrentLanguage = function (code) {
+            return _languages.some(function (lang) {
+                if (lang.code === code) {
+                    _currentLanguage = lang;
+                    return true;
+                }
+                return false;
+            });
+        };
+
+        this.getCurrentLanguage = function () {
+            return _currentLanguage;
+        };
+    }
+
+    window.mt = new MrgiaTemplate();
+    window.MrgiaTemplate = MrgiaTemplate;
+})();
+
+(function () {
+    // #region DOM template processor style
+    var _dataQueryCharacter = "$";
+    var _specialDataQueryCharacter = "~";
+    var _functionQueryCharacter = "@";
+    var _conditionOperatorCharacter = "$";
+    var _languageQueryCharacter = "#";
+
+    // #region helper functions
+    function encodeHtml(data) {
+        if (data === undefined || data === null)
+            return "";
+        var html = typeof (data) === "string" ? data : data.toString();
+        html = html.replace(/&/g, "&amp;");
+        html = html.replace(/</g, "&lt;");
+        html = html.replace(/>/g, "&gt;");
+        html = html.replace(/"/g, "&quot;");
+        html = html.replace(/'/g, "&apos;");
+        return html;
+    }
+
+    function fieldComparer(fieldPath, session) {
+        return function (a, b) {
+            var x = findValueForDomStyle({ field: fieldPath, data: a, session: session });
+            var y = findValueForDomStyle({ field: fieldPath, data: b, session: session });
+            return x > y ? 1 : x < y ? -1 : 0;
+        };
+    }
+
+    function multiFieldComparer(fields, session) {
+        return function (a, b) {
+            for (var m in fields) {
+                if (!m || m.charAt(0) !== "$" || fields[m] !== 1 && fields[m] !== -1)
+                    continue;
+                var x = findValueForDomStyle({ field: m, data: a, session: session });
+                var y = findValueForDomStyle({ field: m, data: b, session: session });
+                if (x > y)
+                    return fields[m];
+                else if (x < y)
+                    return -fields[m];
+            }
+            return 0;
+        }
+    }
+
+    function checkCondition(x1, op, x2, data, fnPool, session, isRoot) {
+        if (typeof x2 === "function")
+            return x2(x1);
+
+        switch (op) {
+            case "eq":
+                return x1 == x2;
+            case "gt":
+                return x1 > x2;
+            case "gte":
+                return x1 >= x2;
+            case "lt":
+                return x1 < x2;
+            case "lte":
+                return x1 <= x2;
+            case "ne":
+                return x1 != x2;
+            case "or":
+                {
+                    if (!Array.isArray(x2))
+                        return false;
+                    return x2.some(function (item) {
+                        if (item !== null && typeof item === "object")
+                            return checkConditions(item, x1, fnPool, session, isRoot);
+                        return x1 == item;
+                    });
+                }
+            case "and":
+                {
+                    if (!Array.isArray(x2))
+                        return false;
+                    return x2.every(function (item) {
+                        if (item !== null && typeof item === "object")
+                            return checkConditions(item, x1, fnPool, session, isRoot);
+                        return x1 == item;
+                    });
+                }
+            case "not":
+                return !checkConditions(x2, x1, fnPool, session, isRoot);
+            case "exists":
+                return x2 ? x1 !== undefined : x1 === undefined;
+            case "type":
+                {
+                    switch (x2) {
+                        case "number":
+                        case "string":
+                        case "boolean":
+                        case "function":
+                        case "undefined":
+                            return typeof x1 === x2;
+                        case "null":
+                            return x1 === null;
+                        case "object":
+                            return typeof x1 === x2 && x1 !== null && !Array.isArray(x1);
+                        case "array":
+                            return Array.isArray(x1);
+                        case "regex":
+                            return x1 instanceof RegExp;
+                        case "date":
+                            return x1 instanceof Date;
+                        case "html-element":
+                            return x1 instanceof HTMLElement;
+                    }
+                }
+            case "in":
+                {
+                    if (!Array.isArray(x2))
+                        return false;
+                    return x2.indexOf(x1) !== -1;
+                }
+            case "nin":
+                {
+                    if (!Array.isArray(x2))
+                        return false;
+                    return x2.indexOf(x1) === -1;
+                }
+            case "size":
+                {
+                    if (x1 === undefined || x1 === null || Array.isArray(x1))
+                        return x1 ? x1.length == x2 : x2 == 0;
+                    return false;
+                }
+            case "all":
+                {
+                    if (!Array.isArray(x1) || !Array.isArray(x2))
+                        return false;
+                    return x2.every(function (item) {
+                        return x1.indexOf(item) !== -1;
+                    });
+                }
+            case "mod":
+                {
+                    if (typeof x1 !== "number" || !Array.isArray(x2) || x2.length !== 2)
+                        return false;
+                    return x1 % x2[0] === x2[1];
+                }
+            case "regex":
+                {
+                    if (typeof x1 !== "string")
+                        return false;
+
+                    var re;
+                    if (typeof x2 === "string") {
+                        re = new RegExp(x1);
+                    }
+                    else if (Array.isArray(x2)) {
+                        if (x2.length)
+                            re = new RegExp(x2[0], x2.length > 1 ? x2[1] : undefined);
+                    }
+                    else if (x2 instanceof RegExp) {
+                        re = x2;
+                    }
+
+                    return re && re.test(x1);
+                }
+        }
+        return false;
+    }
+    function checkConditions(cond, data, fnPool, session, isRoot) {
+        for (var field in cond) {
+            if (field && field.charAt(0) === _conditionOperatorCharacter) {
+                if (!checkCondition(data, field.substr(1), cond[field], data, fnPool, session, isRoot))
+                    return false;
+            }
+            else {
+                var x1 = isRoot && field && field.charAt(0) === _specialDataQueryCharacter
+                    ? findSpecialCharacter(field.substr(1), session)
+                    : findValueByPath(data, field);
+                var value = cond[field];
+                if (typeof value === "string") {
+                    var fn = value && value.charAt(0) === _functionQueryCharacter ? findFunctionForDomStyle({ field: value, fnPool: fnPool, session: session }) : null;
+                    if (fn && !fn(x1))
+                        return false;
+
+                    value = findValueForDomStyle({ field: value, data: data, fnPool: fnPool, session: session });
+                    if (!checkCondition(x1, "eq", value, data, fnPool, session))
+                        return false;
+                } else if (value !== null && typeof value === "object") {
+                    if (!checkConditions(value, x1, fnPool, session))
+                        return false;
+                } else {
+                    if (x1 !== value)
+                        return false;
+                }
+            }
+        }
+        return true;
+    }
+
+    function addEventListener(dom, eventName, handler, useCapture) {
+        if (typeof handler !== "function")
+            return;
+
+        if (typeof dom.addEventListener == "function")
+            dom.addEventListener(eventName, handler, useCapture);
+        else if (typeof dom.attachEvent == "function")
+            dom.attachEvent("on" + eventName, handler);
+    }
+
+    function callFunction(dom, data, fnPool, config, session) {
+        var fn = findFunctionForDomStyle({ field: config.fn, fnPool: fnPool, session: session });
+        if (!fn)
+            return;
+        var me = dom;
+        var thisField = config["this"];
+        if (thisField) {
+            if (thisField.charAt(0) === _dataQueryCharacter)
+                me = findDataForDomStyle({ field: thisField, data: data, session: session });
+            else
+                me = findDataForDomStyle({ field: _dataQueryCharacter + thisField, data: window, session: session });
+        }
+        var parametes = Array.isArray(config.data) ? config.data.map(function (item) { return findDataForDomStyle({ field: item, data: data, session: session }); }) : [findDataForDomStyle({ field: config.data, data: data, session: session })];
+        fn.apply(me, parametes);
+    }
+
+    // #endregion
+
+    // #region Helper functions - new version
+    function findValueByPath(obj, path) {
+        // kiểm tra giá trị của obj và path
+        if (obj === undefined || typeof (path) !== "string") return undefined;
+        if (obj === null) return undefined;
+        // tách path thành các trường, các trường phân cấp bởi dấu .
+        var seg = path.split(".");
+        // thực hiện lấy giá trị theo cây phân cấp
+        var r = obj;
+        var index = 0;
+        if (seg.length > 0 && seg[0] === "this") {
+            index = 1;
+        }
+        for (var i = index; i < seg.length; i++) {
+            // kiểm tra null
+            if (r === null)
+                return undefined;
+
+            // obj là kiểu object thì trả về giá trị thuộc tính
+            if (typeof r === "object" || typeof r === "string" || typeof r === "function")
+                r = r[seg[i]];
+            else
+                // nếu obj không hợp lệ thì trả về undefined
+                return undefined;
+        }
+        return r;
+    }
+
+    /**
+     * Lấy về hàm được quy định bởi field trong fnPool
+     *   Nếu field là hàm --> trả về nó luôn
+     *   Nếu field là chuỗi:
+     *       Nếu bắt đầu bởi @ --> lấy hàm trong fnPool (field là field path sau khi bỏ @)
+     *       Nếu không bắt đầu bởi @ --> lấy hàm trong window (field là field path)
+     *   Nếu field thuộc các kiểu khác --> trả về undefined
+     *//** 
+   * args
+   *  field: trên trường, có dạng a.b hoặc @a.b
+   *  fnPool: đối tượng chứa hàm
+   */
+    function findFunctionForDomStyle(args) {
+        var field = args.field;
+        if (typeof field === "function") {
+            return field;
+        } else if (typeof field === "string") {
+            var fnPool = args.fnPool;
+            var fn = field === "" || field.charAt(0) !== _functionQueryCharacter
+                ? findValueByPath(window, field)
+                : findValueByPath(fnPool, field.substr(1));
+            return typeof fn === "function" ? fn : undefined;
+        }
+
+        return undefined;
+    }
+
+    /**
+     * Lấy về dữ liệu được quy định bởi field trong data
+     *   Nếu field là chuỗi và bắt đầu bởi $ --> lấy giá trị trong data (field là field path sau khi bỏ $)
+     *   Nếu field là chuỗi và bắt đầu bởi # --> lấy giá trị trong kho ngôn ngữ (field là field path sau khi bỏ #)
+     *   Trái lại --> trả về nó luôn
+     *//**
+   * args
+   *  field: trên trường, có dạng a.b hoặc @a.b
+   *  data: đối tượng chứa hàm
+   *  session: phiên bind hiện tại (optional)
+   */
+    function findDataForDomStyle(args) {
+        var field = args.field;
+
+        if (typeof field !== "string" || field === "")
+            return field;
+
+        var data = args.data;
+        if (field.charAt(0) === _dataQueryCharacter) {
+            if (field.length > 1 && field.charAt(1) === _specialDataQueryCharacter) {
+                return findSpecialCharacter(field.substr(2), args.session);
+            }
+            return findValueByPath(data, field.substr(1));
+        }
+        else if (field.charAt(0) === _languageQueryCharacter) {
+
+            if (field.length === 1)
+                return field;
+            if (field.charAt(1) === _languageQueryCharacter)
+                return field.substr(1);
+
+            var currentMt = session ? session.mt ? session.mt : mt : mt;
+            var lang = currentMt.getCurrentLanguage();
+            if (!lang)
+                return "";
+            return lang.data[field.substr(1)];
+        }
+
+        return field;
+    }
+
+    /**
+     * Lấy về dữ liệu được quy định bởi mask trong data
+     *//**
+   * args
+   *  mask: biến chứa các cấu hình cho việc merge data
+   *  data: đối tượng chứa hàm
+   *  session: phiên bind hiện tại (optional)
+   */
+    function mergeData(args) {
+        var mask = args.mask;
+        if (typeof mask !== "string" && typeof mask !== "object" || mask === null)
+            return mask;
+
+        var data = args.data;
+        var session = args.session;
+        if (typeof mask === "string") {
+            return findDataForDomStyle({ field: mask, data: data, session: session });
+        }
+
+        if (Array.isArray(mask)) {
+            return mask.map(function (item) {
+                return mergeData({ mask: item, data: data, session: session });
+            });
+        }
+
+        var obj = {};
+        for (var m in mask) {
+            obj[m] = mergeData({ mask: mask[m], data: data, session: session });
+        }
+        return obj;
+    }
+
+    function findSpecialCharacter(path, session) {
+        return findValueByPath(session.specialData, path);
+    }
+
+    function findValueForDomStyle(args) {
+        var field = args.field;
+        var data = args.data;
+        var fnPool = args.fnPool;
+        var preferFunction = args.preferFunction;
+        var session = args.session;
+
+        var fn;
+        if (typeof field === "string") {
+            if (field === "")
+                return "";
+            switch (field.charAt(0)) {
+                case _dataQueryCharacter:
+                    if (field.length > 1 && field.charAt(1) === _specialDataQueryCharacter) {
+                        return findSpecialCharacter(field.substr(2), session);
+                    }
+                    return findValueByPath(data, field.substr(1));
+                case _functionQueryCharacter:
+                    fn = findValueByPath(fnPool, field.substr(1));
+                    return typeof fn === "function" ? fn : undefined;
+                case _languageQueryCharacter:
+                    var currentMt = session ? session.mt ? session.mt : mt : mt;
+                    var lang = currentMt.getCurrentLanguage();
+                    if (!lang)
+                        return "";
+                    return lang.data[field.substr(1)];
+                default:
+                    if (!preferFunction)
+                        return field;
+                    var gfn = findValueByPath(fnPool, field.substr(1));
+                    return typeof gfn === "function" ? gfn : undefined;
+            }
+        }
+        else if (typeof field === "object") {
+            if (field === null)
+                return null;
+            if ("fn" in field && field.fn) {
+                var value = undefined;
+                if (Array.isArray(field.fn)) {
+                    if (Array.isArray(field.data)) {
+                        // xử lý cho trường hợp {"fn": ["@add", "@round"], "data": [["$a", "$b"], ["$~pipeline.result", 2]]}
+                        // xử lý cho trường hợp {"fn": ["@add", "@round"], "data": [["$a", "$b"], "$~pipeline.result"]}
+                        // xử lý cho trường hợp {"fn": ["@add", "@round"], "data": [["$a", "$b"]]}
+                        // xử lý cho trường hợp {"fn": ["@round", "JSON.stringify"], "data": ["$a", "$~pipeline.result"]}
+                        for (var i = 0; i < field.fn.length; i++) {
+                            fn = findFunctionForDomStyle({ field: field.fn[i], fnPool: fnPool, session: session });
+                            if (!fn)
+                                break;
+
+                            var oldValue = session.specialData.pipeline;
+                            session.specialData.pipeline = { result: value };
+                            var p = field.data[i] === undefined || field.data[i] === null ? value : mergeData({ mask: field.data[i], data: data, session: session });
+                            session.specialData.pipeline = oldValue;
+                            if (Array.isArray(field.data[i]))
+                                // xử lý cho trường hợp {"fn": ["@add", "@round"], "data": [["$a", "$b"], ["$~pipeline.result", 2]]}
+                                value = fn.apply(null, p);
+                            else
+                                // xử lý cho trường hợp {"fn": ["@round", "JSON.stringify"], "data": ["$a", "$~pipeline.result"]}
+                                value = fn(p);
+                        }
+                    }
+                    else {
+                        // xử lý cho trường hợp {"fn": ["@toDate", "@frag", "JSON.stringify"], "data": "$joinedDate"}
+                        // xử lý cho trường hợp {"fn": ["@toDate", "@frag", "JSON.stringify"], "data": 20134}
+                        value = findDataForDomStyle({ field: field.data, data: data, session: session });
+                        field.fn.forEach(function (fnName) {
+                            fn = findFunctionForDomStyle({ field: fnName, fnPool: fnPool, session: session });
+                            if (!fn)
+                                return;
+                            value = fn(value);
+                        });
+                    }
+                }
+                else if (typeof field.fn === "string") {
+                    fn = findFunctionForDomStyle({ field: field.fn, fnPool: fnPool, session: session });
+                    if (fn) {
+                        value = mergeData({ mask: field.data, data: data, session: session });
+                        if (Array.isArray(field.data))
+                            // xử lý cho trường hợp {"fn": "@round", "data": ["$point", 2]}
+                            value = fn.apply(null, value);
+                        else
+                            // xử lý cho trường hợp {"fn": "@round", "data": "$point"}
+                            // xử lý cho trường hợp {"fn": "@round", "data": 1}
+                            value = fn(value);
+                    }
+                }
+                return value;
+            }
+        }
+        return field;
+    }
+
+    // #endregion
+
+    // #region bind data
+
+    /**
+     * @private 
+     * @method 
+     * @param {DomFeatureMediator} arg 
+     */
+    function bindDomAttr(arg) {
+        var attrs = arg.config;
+        var dom = arg.dom;
+        var data = arg.data;
+        var fnPool = arg.fnPool;
+        var mediator = arg.mediator;
+        var session = arg.session;
+
+        var skipInner = false;
+        for (var attrName in attrs) {
+            var value = findValueForDomStyle({ field: attrs[attrName], data: data, fnPool: fnPool, session: session });
+            if (attrName === "html") {
+                if (mediator.skipInner)
+                    continue;
+                dom.innerHTML = value;
+                skipInner = true;
+                continue;
+            }
+            else if (attrName === "text") {
+                if (mediator.skipInner)
+                    continue;
+                dom.innerHTML = encodeHtml(value);
+                skipInner = true;
+                continue;
+            }
+            else if (attrName === "value") {
+                if (dom.nodeName === "TEXTAREA")
+                    dom.innerHTML = encodeHtml(value);
+                else
+                    dom.setAttribute(attrName, (value === null || value === undefined) ? "" : value);
+            }
+            else if (attrName.indexOf(".") === -1)
+                dom.setAttribute(attrName, value);
+            else {
+                var segs = attrName.split(".");
+                var cur = dom;
+                for (var i = 0; i < segs.length - 1; i++) {
+                    if (cur === null || typeof cur !== "object") {
+                        cur = null;
+                        break;
+                    }
+                    cur = cur[segs[i]];
+                }
+                if (cur !== null)
+                    cur[segs[segs.length - 1]] = value;
+            }
+        }
+        delete dom.dataset.mtAttr;
+        mediator.skipInner = skipInner;
+    }
+
+    /**
+     * @private 
+     * @method 
+     * @param {DomFeatureMediator} arg 
+     */
+    function bindDomIterate(arg) {
+        var config = arg.config;
+        var dom = arg.dom;
+        var data = arg.data;
+        var fnPool = arg.fnPool;
+        var mediator = arg.mediator;
+
+        var arr = findValueForDomStyle({ field: config.data, data: data, session: arg.session });
+
+        if (config.mode !== "key-value" && arr !== null && arr !== undefined && !Array.isArray(arr)) {
+            dom.dataset[arg.name + "Error"] = "Invalid type error: Expected array (field: '" + config.data + "')";
+            mediator.skipInner = stop;
+            mediator.skipInner = true;
+            return;
+        }
+        else if (config.mode === "key-value" && arr !== null && arr !== undefined && typeof arr != "object") {
+            dom.dataset[arg.name + "Error"] = "Invalid type error: Expected object (field: '" + config.data + "')";
+            mediator.skipInner = stop;
+            mediator.skipInner = true;
+            return;
+        }
+
+        var iterateMe = config.iterateMe === true;
+
+        var children;
+
+        if (!iterateMe) {
+            children = [];
+            while (dom.firstChild) {
+                children.push(dom.firstChild);
+                dom.removeChild(dom.firstChild);
+            }
+        }
+
+        if (!arr) {
+            mediator.skipInner = true;
+            children = null;
+            delete dom.dataset[arg.name];
+            dom.innerHTML = "";
+            return;
+        }
+
+        var parentIterateScope = arg.session.specialData.iterate;
+        var currentIterateScope = {};
+
+        if (config.inject && typeof config.inject == "object") {
+            for (var m in config.inject) {
+                currentIterateScope[m] = findDataForDomStyle({ field: config.inject[m], data: data, session: arg.session });
+            }
+        }
+        currentIterateScope.parent = parentIterateScope;
+		arg.session.specialData.iterate = currentIterateScope;															  
+
+        var filter = null;
+        if (config.mode !== "key-value") {
+            
+            if (config.filter) {
+                var fnFilter = findFunctionForDomStyle({ field: config.filter, fnPool: fnPool, session: arg.session });
+                if (typeof fnFilter === "function")
+                    filter = fnFilter;
+            }
+
+            if (config.transform) {
+                var fnTransform = findFunctionForDomStyle({ field: config.transform, fnPool: fnPool, session: arg.session });
+                if (typeof fnTransform === "function") {
+                    var transformedArr = [];
+                    arr.forEach(function (item, idx, array) {
+                        transformedArr.push(fnTransform(item, idx, array, data));
+                    });
+                    arr = transformedArr;
+                }
+            }
+
+            if (config.sort) {
+                if (typeof config.sort === "string") {
+                    var fnSort = findFunctionForDomStyle({ field: config.sort, fnPool: fnPool, session: arg.session });
+                    if (typeof fnSort === "function")
+                        arr.sort(fnSort);
+                    else if (!fnSort && config.sort.charAt(0) === _dataQueryCharacter)
+                        arr.sort(fieldComparer(config.sort, arg.session));
+                } else if (typeof config.sort === "object") {
+                    arr.sort(multiFieldComparer(config.sort, arg.session));
+                }
+            }
+
+            delete dom.dataset[arg.name];
+
+            arr.forEach(function (item, idx, array) {
+                if (filter && !filter(item, idx, array, data))
+                    return;
+
+                currentIterateScope.index = idx;
+                currentIterateScope.index1 = idx + 1;
+
+                if (iterateMe) {
+                    var node = dom.cloneNode(true);
+                    dom.parentNode.insertBefore(node, dom);
+
+                    var oldScope = arg.session.scope;
+                    if (config.scope)
+                        arg.session.scope += "/" + config.scope + "[" + idx + "]";
+
+                    arg.session.mt.bindDom(node, item, fnPool, arg.session);
+
+                    if (config.scope)
+                        arg.session.scope = oldScope;
+                } else {
+                    children.forEach(function (child) {
+                        var node = child.cloneNode(true);
+                        dom.appendChild(node);
+
+                        var oldScope = arg.session.scope;
+                        if (config.scope)
+                            arg.session.scope += "/" + config.scope + "[" + idx + "]";
+
+                        arg.session.mt.bindDom(node, item, fnPool, arg.session);
+
+                        if (config.scope)
+                            arg.session.scope = oldScope;
+                    });
+                }
+            });
+
+        } else {
+            
+            if (config.filter) {
+                var fnFilter = findFunctionForDomStyle({ field: config.filter, fnPool: fnPool, session: arg.session });
+                if (typeof fnFilter === "function")
+                    filter = fnFilter;
+            }
+            delete dom.dataset[arg.name];
+            var idx = 0;
+            var index = 0;
+            for (var key in arr) {
+                if (filter && !filter(key, idx, arr, data)) {
+                    idx++;
+                    continue;
+                }
+
+                idx++;
+
+                currentIterateScope.index = index;
+                currentIterateScope.index1 = index + 1;
+                index++;
+
+                if (iterateMe) {
+                    var node = dom.cloneNode(true);
+                    dom.parentNode.insertBefore(node, dom);
+
+                    var oldScope = arg.session.scope;
+                    if (config.scope)
+                        arg.session.scope += "/" + config.scope + "[" + key + "]";
+
+                    arg.session.mt.bindDom(node, { key: key, value: arr[key] }, fnPool, arg.session);
+
+                    if (config.scope)
+                        arg.session.scope = oldScope;
+                } else {
+                    children.forEach(function (child) {
+                        var node = child.cloneNode(true);
+                        dom.appendChild(node);
+
+                        var oldScope = arg.session.scope;
+                        if (config.scope)
+                            arg.session.scope += "/" + config.scope + "[" + key + "]";
+
+                        arg.session.mt.bindDom(node, { key: key, value: arr[key] }, fnPool, arg.session);
+
+                        if (config.scope)
+                            arg.session.scope = oldScope;
+                    });
+                }
+            }
+        }
+		
+		if (config.oniterated) {
+            var fnOnIterated = findFunctionForDomStyle({ field: config.oniterated, fnPool: fnPool, session: arg.session });
+            if (typeof fnOnIterated == "function") {
+                try {
+                    fnOnIterated.call(dom, arr);
+                } catch (e) {
+                    console.error(e);
+                }
+            }
+        }
+        
+
+        // clean up 
+        arg.session.specialData.iterate = parentIterateScope;
+        if (config.inject && typeof config.inject == "object") {
+            for (var m in config.inject) {
+                currentIterateScope[m] = null;
+            }
+        }
+        currentIterateScope.parent = null;
+        currentIterateScope = null;
+
+        if (iterateMe) {
+            dom.parentNode.removeChild(dom);
+            mediator.stop = true;
+        }
+
+        mediator.skipInner = true;
+    }
+
+    /**
+     * @private 
+     * @method 
+     * @param {DomFeatureMediator} arg 
+     */
+    function bindDomCond(arg) {
+        var config = arg.config;
+        var dom = arg.dom;
+        var data = arg.data;
+        var fnPool = arg.fnPool;
+        var mediator = arg.mediator;
+
+        if (typeof config !== "object")
+            return;
+
+        var r = checkConditions(config, data, fnPool, arg.session, true);
+        if (!r) {
+            dom.parentNode.removeChild(dom);
+            mediator.stop = true;
+            mediator.skipInner = true;
+        }
+
+        delete dom.dataset[arg.name];
+    }
+
+    /**
+     * @private 
+     * @method 
+     * @param {DomFeatureMediator} arg 
+     */
+    function bindDomEvent(arg) {
+        var config = arg.config;
+        var dom = arg.dom;
+
+        for (var eventName in config) {
+            var fn = findFunctionForDomStyle({ field: config[eventName], fnPool: arg.fnPool, session: arg.session });
+            if (fn && arg.fnPool && arg.fnPool.__context) {
+                (function (f, eName, context) {
+                    addEventListener(dom, eName, function () {
+                        var length = arguments.length;
+                        arguments.length = length + 1;
+                        arguments[length] = context;
+                        f.apply(this, arguments);
+                    }, false);
+                })(fn, eventName, arg.fnPool.__context);
+            }
+            else
+                addEventListener(dom, eventName, fn, false);
+        }
+
+        delete dom.dataset[arg.name];
+    }
+
+
+    function bindCallFunction(arg) {
+        if (Array.isArray(arg.config)) {
+            arg.config.forEach(function (c) {
+                callFunction(arg.dom, arg.data, arg.fnPool, c, arg.session);
+            });
+        } else
+            callFunction(arg.dom, arg.data, arg.fnPool, arg.config, arg.session);
+
+        delete arg.dom.dataset[arg.name];
+    }
+    // #endregion
+
+    // #region watch
+    var _mediatorWatcher = {};
+
+    function realtimeWatchHandler() {
+        var value = this.value || "";
+
+        var watcherConfig = _mediatorWatcher[this.__mtWatchName];
+        if (!watcherConfig)
+            return;
+
+        var orphans = null;
+        watcherConfig.realtime.forEach(function (watcherId) {
+            var dom = document.getElementById(watcherId);
+            if (!dom) {
+                if (!orphans)
+                    orphans = [];
+                orphans.push(dom);
+                return;
+            }
+            bindDomAttr({
+                dom: dom,
+                config: dom.__mtWatcherConfig.attr,
+                name: "watchAttr",
+                data: {
+                    value: value
+                },
+                fnPool: dom.__mtWatcherFnPool,
+                mediator: {}
+            });
+        });
+        if (orphans)
+            orphans.forEach(function (removedId) {
+                var idx;
+                while ((idx = watcherConfig.realtime.indexOf(removedId)) !== -1) {
+                    watcherConfig.normal.splice(idx, 1);
+                }
+            });
+    }
+
+    function watchHandler() {
+        var value = this.nodeName === "INPUT" && (this.type === "checkbox" || this.type === "radio") && !this.checked ? null : this.value;
+
+        var watcherConfig = _mediatorWatcher[this.__mtWatchName];
+        if (!watcherConfig)
+            return;
+
+        var orphans = null;
+        watcherConfig.normal.forEach(function (watcherId) {
+            var dom = document.getElementById(watcherId);
+            if (!dom) {
+                if (!orphans)
+                    orphans = [];
+                orphans.push(dom);
+                return;
+            }
+            bindDomAttr({
+                dom: dom,
+                config: dom.__mtWatcherConfig.attr,
+                name: "watchAttr",
+                data: {
+                    value: value
+                },
+                fnPool: dom.__mtWatcherFnPool,
+                mediator: {}
+            });
+        });
+        if (orphans)
+            orphans.forEach(function (removedId) {
+                var idx;
+                while ((idx = watcherConfig.normal.indexOf(removedId)) !== -1) {
+                    watcherConfig.normal.splice(idx, 1);
+                }
+            });
+    }
+
+    var _watcherIdIndexSeed = 0;
+
+    /**
+     * @private 
+     * @method 
+     * @param {DomFeatureMediator} arg 
+     */
+    function mtWatch(arg) {
+        var name = arg.session.scope + "#" + arg.config.name;
+        var watcherConfig = _mediatorWatcher[name];
+        if (!watcherConfig) {
+            _mediatorWatcher[name] = watcherConfig = {
+                realtime: [],
+                normal: []
+            };
+        }
+
+        var id = arg.dom.id;
+        if (!id) {
+            arg.dom.id = id = "__mtWatcher_" + _watcherIdIndexSeed;
+            _watcherIdIndexSeed++;
+        }
+
+        watcherConfig[arg.config.realtime ? "realtime" : "normal"].push(id);
+
+        arg.dom.__mtWatcherConfig = arg.config;
+        arg.dom.__mtWatcherFnPool = arg.fnPool;
+        //arg.dom.dataset.watchPath = name;
+        delete arg.dom.dataset[arg.name];
+    }
+
+    /**
+     * @private 
+     * @method 
+     * @param {DomFeatureMediator} arg 
+     */
+    function mtDefineWatchee(arg) {
+        var nodeName = arg.dom.nodeName;
+        if (nodeName !== "INPUT" && nodeName !== "SELECT" && nodeName !== "TEXTAREA") {
+            dom.dataset[arg.name + "Error"] = "Cannot define watchee in this element";
+            return;
+        }
+
+        var name = arg.session.scope + "#" + arg.config.name;
+
+        arg.dom.__mtWatchName = name;
+        //arg.dom.dataset.watchPath = name;
+
+        if (this.nodeName === "INPUT" && (this.type === "checkbox" || this.type === "radio")) {
+            addEventListener(arg.dom, "click", realtimeWatchHandler, false);
+            addEventListener(arg.dom, "click", watchHandler, false);
+        }
+        else if (nodeName === "SELECT") {
+            addEventListener(arg.dom, "change", realtimeWatchHandler, false);
+            addEventListener(arg.dom, "change", watchHandler, false);
+        }
+        else {
+            addEventListener(arg.dom, "keyup", realtimeWatchHandler, false);
+            addEventListener(arg.dom, "change", watchHandler, false);
+        }
+        delete arg.dom.dataset[arg.name];
+    }
+    // #endregion
+
+    // #region check
+    var _mediatorChecker = {};
+
+    var _validationDefaultMessages = {
+        "%!required%": "Required",
+        "%!maxLength%": "Too long",
+        "%!minLength%": "Too short",
+        "%!min%": "Too small",
+        "%!max%": "Too big",
+        "%!pattern%": "Invalid"
+    }
+
+    function checkHandler(e) {
+        var value = this.nodeName === "INPUT" && (this.type === "checkbox" || this.type === "radio") && !this.checked ? "" : this.value || "";
+
+        var messageIds = _mediatorChecker[this.__mtCheckName];
+        if (!messageIds)
+            return;
+
+        var mtCheckConfig = this.__mtCheckConfig;
+
+        var errorMsg = "";
+        if (!errorMsg && mtCheckConfig.required && !value) {
+            errorMsg = mtCheckConfig.requiredMessage || "%!required%";
+        }
+
+        if (!errorMsg && "maxLength" in mtCheckConfig && value !== "" && value.length > mtCheckConfig.maxLength) {
+            errorMsg = mtCheckConfig.maxLengthMessage || "%!maxLength%";
+        }
+
+        if (!errorMsg && "minLength" in mtCheckConfig && value !== "" && value.length > mtCheckConfig.minLength) {
+            errorMsg = mtCheckConfig.minLengthMessage || "%!minLength%";
+        }
+
+        if (!errorMsg && "min" in mtCheckConfig && value !== "" && value < mtCheckConfig.min) {
+            errorMsg = mtCheckConfig.minMessage || "%!min%";
+        }
+
+        if (!errorMsg && "max" in mtCheckConfig && value !== "" && value < mtCheckConfig.max) {
+            errorMsg = mtCheckConfig.maxMessage || "%!max%";
+        }
+
+        if (!errorMsg && "pattern" in mtCheckConfig && value !== "" && !value.match(new RegExp(mtCheckConfig.pattern, mtCheckConfig.patternOptions))) {
+            errorMsg = mtCheckConfig.patternMessage || "%!pattern%";
+        }
+
+        if (!errorMsg && "complex" in mtCheckConfig && value !== "") {
+
+        }
+
+        if (!errorMsg && "custom" in mtCheckConfig && value !== "") {
+            var fn = findFunctionForDomStyle({ field: mtCheckConfig.custom, fnPool: this.__mtCheckFnPool });
+            if (fn) {
+                var s = fn(value, this, e);
+                if (s && typeof s == "string")
+                    errorMsg = s;
+            }
+        }
+
+        var orphans = null;
+        messageIds.forEach(function (messageId) {
+            var dom = document.getElementById(messageId);
+            if (!dom) {
+                if (!orphans)
+                    orphans = [];
+                orphans.push(dom);
+                return;
+            }
+
+            switch (dom.__mtCheckMessageConfig.mode) {
+                case "show-hide":
+                case "showHide":
+                    if (errorMsg) {
+                        //if (/^%!\w+%$/.test(errorMsg))
+                        if (errorMsg in _validationDefaultMessages)
+                            dom.innerHTML = dom.__mtCheckMessageOriginHtml;
+                        else
+                            dom.innerHTML = encodeHtml(errorMsg);
+                        dom.style.display = "block";
+                    } else {
+                        dom.innerHTML = "";
+                        dom.style.display = "none";
+                    }
+                    break;
+                case "toggle-class":
+                case "toggleClass":
+                    if (errorMsg) {
+                        //if (/^%!\w+%$/.test(errorMsg))
+                        if (errorMsg in _validationDefaultMessages)
+                            dom.innerHTML = dom.__mtCheckMessageOriginHtml;
+                        else
+                            dom.innerHTML = encodeHtml(errorMsg);
+
+                        if (!dom.className) {
+                            dom.className = dom.__mtCheckMessageConfig.toggleClass;
+                            break;
+                        }
+                        var classes = dom.className.split(/\s/);
+                        if (classes.indexOf(dom.__mtCheckMessageConfig.toggleClass) === -1) {
+                            classes.push(dom.__mtCheckMessageConfig.toggleClass);
+                            dom.className = classes.join(" ");
+                        }
+                    } else {
+                        dom.innerHTML = "";
+
+                        if (!dom.className)
+                            break;
+
+                        var classes = dom.className.split(/\s/);
+                        for (var i = classes.length - 1; i > 0; i--) {
+                            if (classes[i] === dom.__mtCheckMessageConfig.toggleClass)
+                                classes.splice(i, 1);
+                        }
+
+                        dom.className = classes.join(" ");
+                    }
+                    break;
+                default:
+                    var message = _validationDefaultMessages[errorMsg] || errorMsg;
+                    dom.innerHTML = message ? encodeHtml(message) : "";
+                    break;
+            }
+        });
+
+        if (orphans)
+            orphans.forEach(function (removedId) {
+                var idx;
+                while ((idx = messageIds.indexOf(removedId)) !== -1) {
+                    messageIds.splice(idx, 1);
+                }
+            });
+    }
+
+    var _checkerIdIndexSeed = 0;
+
+    /**
+     * @private 
+     * @method 
+     * @param {DomFeatureMediator} arg 
+     */
+    function mtCheck(arg) {
+
+        var nodeName = arg.dom.nodeName;
+        if (nodeName !== "INPUT" && nodeName !== "SELECT" && nodeName !== "TEXTAREA") {
+            arg.dom.dataset[arg.name + "Error"] = "Cannot check this element";
+            return;
+        }
+
+        var name = arg.session.scope + "#" + arg.config.name;
+
+        arg.dom.__mtCheckName = name;
+        arg.dom.__mtCheckConfig = arg.config;
+        arg.dom.__mtCheckFnPool = arg.fnPool;
+
+        addEventListener(arg.dom, this.nodeName === "INPUT" && (this.type === "checkbox" || this.type === "radio") ? "click" : "change", checkHandler, false);
+        addEventListener(arg.dom, "blur", checkHandler, false);
+
+        delete arg.dom.dataset[arg.name];
+    }
+
+    /**
+     * @private 
+     * @method 
+     * @param {DomFeatureMediator} arg 
+     */
+    function mtCheckMessage(arg) {
+        var name = arg.session.scope + "#" + arg.config.name;
+        var checkerConfig = _mediatorChecker[name];
+        if (!checkerConfig) {
+            _mediatorChecker[name] = checkerConfig = [];
+        }
+
+        var id = arg.dom.id;
+        if (!id) {
+            arg.dom.id = id = "__mtCheckMessage_" + _checkerIdIndexSeed;
+            _checkerIdIndexSeed++;
+        }
+
+        checkerConfig.push(id);
+
+        arg.dom.__mtCheckMessageConfig = arg.config;
+        arg.dom.__mtCheckMessageOriginHtml = arg.dom.innerHTML;
+        delete arg.dom.dataset[arg.name];
+    }
+    // #endregion
+
+    // chỉ có ý nghĩa để cho bên ngoài sử dụng, bên trong thư viện này không dùng tham chiếu builtinFeatures mà dùng trực tiếp các hàm
+    mt.builtinFeatures = {
+        mtCond: bindDomCond,
+        mtIterate: bindDomIterate,
+        mtCall: bindCallFunction,
+        mtAttr: bindDomAttr,
+        mtEvent: bindDomEvent,
+        mtWatch: mtWatch,
+        mtDefineWatchee: mtDefineWatchee,
+        mtCheck: mtCheck,
+        mtCheckMessage: mtCheckMessage
+    };
+    mt.fnUtils = {
+        findValueByPath: findValueByPath,
+        findDataForDomStyle: findDataForDomStyle,
+        findFunctionForDomStyle: findFunctionForDomStyle,
+        findValueForDomStyle: findValueForDomStyle,
+        mergeData: mergeData,
+        fieldComparer: fieldComparer,
+        multiFieldComparer: multiFieldComparer,
+        checkCondition: checkCondition,
+        checkConditions: checkConditions,
+        addEventListener: addEventListener
+    };
+    if (typeof formatValue == "function")
+        mt.fnUtils.formatValue = formatValue;
+
+
+    for (var feature in mt.builtinFeatures) {
+        mt.registerDomFeature(feature, mt.builtinFeatures[feature]);
+    }
+})();