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

由于没有属性名称来引用传入的数据，我尝试使用$ data但它不起作用。我怎样才能在这里访问数组？

非常感谢。

Answer 1

如果将数组传递给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>

当然，我不确定你是否打算让“杰克”共出现九次;但这似乎是你的代码在它工作时会做的事情。

Answer 2

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>"
        );
    };

如果您无法理解，请告诉我。

使用每个迭代传入的数据

2 个答案: