使用每個迭代傳入的數據

Question

如果數組直接傳遞給jquery模板（不是對象的屬性），我該如何迭代它？

例如：

var hired=[{name:'Jack'}, {name:'Jack'}, {name:'Jack'}] 

這是傳遞到下面的模板中的數據：

Template Start 
<div> 

<table> 

{{each $data}} 

<tr> 
    <td width="250" align="left">${$value.name}</th> 
    <td width="150" align="center">${$value.name}</th> 
    <td width="60" align="center">${$value.name}</th> 
</tr> 
{{/each}} 

</table> 

</div> 

Template End 

由於沒有屬性名稱來引用的數據傳遞，我使用$數據嘗試，但它不起作用。我怎樣才能訪問這裏的數組？

非常感謝。

Answer 1

HTML：

<table id="tableID"> 
</table> 

的javascript：

var hired=[{name:'Jack'}, {name:'Jimmy'}, {name:'Ron'}] 

    for(var i=0; i < hired.length; i++) { 
     $("#tableID").append(
      "<tr> \ 
      <td width=\"250\" align=\"left\">" + hired[ i ].name + "</td> \ 
      <td width=\"150\" align=\"center\"> " + hired[ i ].name + " </td> \ 
      <td width=\"60\" align=\"center\"> " + hired[ i ].name + " </td> \ 
      </tr>" 
     ); 
    }; 

讓我知道，如果你無法理解的東西。

Answer 2

如果您將數組傳遞給tmpl，它將自動將模板應用於每個元素。這不是你想要的嗎？

var hired = [{name:'Jack'}, {name:'Jack'}, {name:'Jack'}]; 

隨着模板：

<script id="hired-template" type="text/x-jquery-tmpl"> 
    <tr> 
     <!-- I think you originally closed these with 'th' by mistake. --> 
     <td width="250" align="left">${name}</td> 
     <td width="150" align="center">${name}</td> 
     <td width="60" align="center">${name}</td> 
    </tr> 
</script> 

<table id="hired-table"></table> 

這應該允許你這樣做：

$('#hired-template').tmpl(hired).appendTo('#hired-table'); 

並獲得：

<table id="hired-table"> 
    <tr> 
     <td width="250" align="left">Jack</td> 
     <td width="150" align="center">Jack</td> 
     <td width="60" align="center">Jack</td> 
    </tr> 
    <tr> 
     <td width="250" align="left">Jack</td> 
     <td width="150" align="center">Jack</td> 
     <td width="60" align="center">Jack</td> 
    </tr> 
    <tr> 
     <td width="250" align="left">Jack</td> 
     <td width="150" align="center">Jack</td> 
     <td width="60" align="center">Jack</td> 
    </tr> 
</table> 

當然，我不知道，如果你打算讓「傑克」總共出現9次ES;但這似乎是你的代碼如果能夠工作的話。