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 に答える