mushroom-cli 1.1.2 → 1.2.0-alpha.10

package/docs/mt-dom-1.0.js

@@ -1,1398 +1,1268 @@
-(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]);
-  }
-})();
+(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]);
+    }
+})();