mushroom-cli 1.1.1 → 1.1.2

package/docs/mt-dom-1.0.js

@@ -1,1269 +1,1398 @@
-(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;
-                    }
-                    return false;
-                }
-            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]);
-    }
-})();
+(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;
+        }
+        return false;
+      }
+      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]];
+      // nếu obj không hợp lệ thì trả về undefined
+      else 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);
+              // xử lý cho trường hợp {"fn": ["@round", "JSON.stringify"], "data": ["$a", "$~pipeline.result"]}
+              else 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);
+            // xử lý cho trường hợp {"fn": "@round", "data": "$point"}
+            // xử lý cho trường hợp {"fn": "@round", "data": 1}
+            else 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]);
+  }
+})();