Question

我有以下模板

<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}

有人可以告诉我为什么temaplate没有加载数据。

我引用了jQuery 19.2和jQuery.tmpl.js

尝试改变jQuery temaplate的语法等，但没有运气。任何帮助表示赞赏。

Answer 1

尝试：

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

而不是

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

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

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

<强> Fiddle

Answer 2

下面是一个附加jQuery模板的示例：

$("#bookTemplate").tmpl(data).appendTo("#dvProductsGrid");

jQuery模板问题 - 不呈现

2 个答案: