1. 构造方法

    var tpl=$.Template(template);
    template 为字符串类型的 html 模板,模板中使用花括弧“{}”来指明需要使用数据绑定的名称
    例如:

    var tpl=$.Template('<div id="list_{PRODUCT_ID}" product_name="{PRODUCT_NAME}"></div>');
    

  2. 解析和生成 DOM

    使用 var tpl=$.Template(tempStr) 构造模板对象后可以通过它的原型方法来解析和生成 DOM
    使用 tpl.applyTemplate(values(jsonobject|$.DataMap)); 生成解析后的 html 串
    也可以直接将解析生成的 html 插入到某个 DOM 元素下,调用方式如下:

    tpl.append(el,values(jsonobject|$.DataMap),returnElement);
    将模板解析生成的DOM元素插入到 el 元素的结束标签之前,returnElement 为 true 时,返回新插入 DOM 的封装对象,否则返回 DOM 原生对象
    tpl.insertFirst(el,values(jsonobject|$.DataMap),returnElement);
    将模板解析生成的 DOM 元素做为 el 元素的第一个子节点插入
    tpl.insertBefore(el,values(jsonobject|$.DataMap),returnElement);
    将模板解析生成的 DOM 元素插入到 el 元素的开始标签之前
    tpl.insertAfter(el,values(jsonobject|$.DataMap),returnElement);
    将模板解析生成的 DOM 素插入到 el 元素的结束标签之后
  3. 模板中数据绑定时的数据处理

    html 模板中的数据绑定可以调用 $.format 中的字符串处理函数来对绑定的数据进行处理,调用方式如下:

    1. $.format.trim 调用:{value:trim} 例:'<span class="title">{TITLE:trim}</span>'
    2. $.format.ellipsis 调用 {value:ellipsis(10,true)}
      例:'<span class="title">{TITLE:ellipsis(10,true)}</span>'
    3. $.format.undef 调用 {value:undef}
    4. $.format.substr 调用 {value::substr(0,3)}
    5. $.format.lowercase 调用 {value:lowercase}
    6. $.format.uppercase 调用 {value:uppercase}
    7. $.format.fileSize 调用 {value:fileSize}
    8. $.format.htmlEncode 调用 {value:htmlEncode}
    9. $.format.htmlDecode 调用 {value:htmlDecode}
    10. $.format.math 调用 {value:math("* 10")}
      例:var tpl=$.Template('<span>
      计算结果:{value} * 10 = {value:math("* 10")}</span>');
    11. $.format.number 调用 {value:number('0.00')}
    12. $.format.nl2br 调用 {value:nl2br}
    13. $.format.toUtf8 调用 {value:toUtf8}
    14. $.format.toGbk 调用 {value:toGbk}
  4. $.DataMap 和 $.DatasetList 对象中集成的数据绑定方法

    1. $.DataMap 数据绑定

      data.bind(selector,displayStyle);

      参数 selector 为要绑定数据的容器元素选择串,如果有多个,则绑定第一个
      参数 displayStyle 为模板的 display 样式,如果为空,则使用 display:block 样式
      示例:

      html:

      <div id="user_info">
      <div x_tag="x_tag=x-databind-template" style="display:none">
      <span>用户姓名:{USER_NAME}</span>
      <span>用户地址:{USER_ADDR}</span>
      </div>
      </div>
      

      data:

      var d=$.DataMap({"USER_NAME":"王国强","USER_ADDR":"北京二环"});

      绑定:

      d.bind("#menu_list");
    2. $.DatasetList 数据绑定

      datalist.bind(selector,displayStyle);

      参数用途和 $.DataMap.bind 方法参数一致
      示例:

      html:

      <ul id="menu_list">
      <li x_tag="x_tag=x-databind-template" style="display:none"><a href="{MENU_URL}">{MENU_TITLE}</a></li>
      </ul>
      

      datalist:

      var ds=$.DatasetList([{"MENU_ITLE":"产品变更","MENU_URL":"app?service=page/ProductChange"},
      {"MENU_ITLE":"开户","MENU_URL":"app?service=page/Open"}]);
      

      绑定:

      ds.bind("#menu_list","inline-block");

      【注】模板的 html 元素上必须加 x_tag="x_tag=x-databind-template" 属性