动态模板的实例化

1、在xtpl文件中使用{{%<script type="text/template">......</script>%}} 定义模板

........
<div id="append-content">  等待被实例之后的模板填充  </div>
........

{{%
<script type="text/template" id="J_import_env_tr">
    <tr>
        <td>表格的第一行</td>
        <td><a href="/ec/config/scm/template/{{id}}/detail" target="_blank">{{name}}</a></td>
        <td>{{description}}</td>
        <td>{{creator}}</td>
    </tr>
</script>
%}}

需要说明的是<script></script>中间的代码是不显示的。

 

 

2、在JavaScript文件中对模板进行实例化，同时将实例化之后的模板显示到指定的位置上

$(function () {

    var templates = {
        name:'测试环境预发部署',
        description:'断电演练测试稳定性',
        creator:'测试人:骁默'
    }

    var temp = new XTemplate($("#J_import_env_tr").html());
    var html = $(temp.render(templates));
    $("#append-content").html(html);
}