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

Try:

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

вместо

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

вот пример с JQuery Tmpl с другим синтаксисом.

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

Fiddle