1

我有以下模板

<script id="employeeTemplate" type="text/html">
    <tr>
        <td>${Name}</td>
        <td>${Designation}</td>
        <td>{{if Age>30}}
            <span style='background-color: red'>Middle-aged</span>
            {{else}}
            <span style='background-color: yellow'>Still young</span>
            {{/if}}</td>
        <td>${Department}</td>
        <td>${DataSource}</td>
    </tr>
</script>

以及以下功能

    <script type="text/javascript">
    function BindClientSideData() {
        //JSON data format
        var emps = [
        { Name: "John", Designation: "Analyst", Age: 25, Department: "IT", DataSource: "Client" },
        { Name: "Matthew", Designation: "Manager", Age: 38, Department: "Accounts", DataSource: "Client" },
        { Name: "Emma", Designation: "Senior Manager", Age: 40, Department: "HR", DataSource: "Client" },
        { Name: "Sid", Designation: "Analyst", Age: 27, Department: "HR", DataSource: "Client" },
        { Name: "Tom", Designation: "Senior Analyst", Age: 35, Department: "IT", DataSource: "Client" }
        ];
        BindTable(emps);
    }

    function BindTable(data) {
        // removes existing rows from table except header row
        $('#tblEmployee tr:gt(0)').remove();
        //apply tmpl plugin to <script> and append result to table
      //  $("#employeeTemplate").tmpl(data).appendTo("#tblEmployee");
       $("#tblEmployee").loadTemplate("#employeeTemplate", data);
    }
</script>

问题是当调用 BindClientSideData() 时,我得到以下输出

    ${Name} ${Designation} {{if Age>30}} Middle-aged {{else}} Still young {{/if}} ${Department} ${DataSource} 
${Name} ${Designation} {{if Age>30}} Middle-aged {{else}} Still young {{/if}} ${Department} ${DataSource} 
${Name} ${Designation} {{if Age>30}} Middle-aged {{else}} Still young {{/if}} ${Department} ${DataSource} 
${Name} ${Designation} {{if Age>30}} Middle-aged {{else}} Still young {{/if}} ${Department} ${DataSource} 
${Name} ${Designation} {{if Age>30}} Middle-aged {{else}} Still young {{/if}} ${Department} ${DataSource} 

有人可以让我知道为什么模板没有加载数据。

我引用 jQuery 19.2 和 jQuery.tmpl.js

尝试更改 jQuery 模板的语法等,但没有运气。任何帮助表示赞赏。

4

2 回答 2

0

尝试:

$("#tblEmployee").loadTemplate($("#employeeTemplate"), data);

代替

$("#tblEmployee").loadTemplate("#employeeTemplate", data);

这是一个使用不同语法的 jquery tmpl 示例。

$.tmpl($('#employeeTemplate'), data).appendTo('#tblEmployee');

小提琴

于 2013-09-10T22:53:52.660 回答
0

这是附加jQuery模板的示例:

$("#bookTemplate").tmpl(data).appendTo("#dvProductsGrid");
于 2018-11-28T07:30:52.640 回答