javascript - Jquery 模板不适用于“每个”

Question

我的源代码在这里：

http://jsfiddle.net/2pkHL/

我不知道为什么它不能正确渲染。另外，有没有办法不将数据嵌套在另一个对象中？

<script id='myTemplate' type='text/x-jquery-tmpl'>

Table of stuffs:

<table>
{{each value}}
<tr>
    <td>${name}</td>
    <td>${value}</td>
</tr>
{{/each}}

</table>


</script>


<div id="target">

</div>



var something = function () { };

var results = [{ name: 'First', value: 1 }, { name: 'Second', value: 2 }];

something.value = results;

$('#myTemplate').tmpl(something).appendTo('#target');

Answer 1

你只需要这两行：

var results = [{ name: 'First', value: 1 }, { name: 'Second', value: 2 }];
$('#myTemplate').tmpl({value: results}).appendTo('#target');

我使用的是普通对象而不是函数。见演示：http: //jsfiddle.net/2pkHL/6/。

---

你可以让事情变得更简单。由于只有行受数据影响（不是<table>），因此您可以仅在模板中包含行，直接提供一个数组作为数据，并tmpl为数组中的每个元素自动生成 HTML：

<script id='myTemplate' type='text/x-jquery-tmpl'>
<tr>
    <td>${name}</td>
    <td>${value}</td>
</tr>
</script>

Table of stuffs:
<table id="target">
</table>

JS：

var results = [{ name: 'First', value: 1 }, { name: 'Second', value: 2 }];
$('#myTemplate').tmpl(results).appendTo('#target');

在此处查看此版本：http: //jsfiddle.net/2pkHL/11/

Answer 2

好吧，您的主要问题是您说 var something 是一个函数。如果你把它变成一个对象，你就准备好了！:)

这是一个更新的小提琴；http://jsfiddle.net/2pkHL/5/

当然，这里也有更新的视频：

<script id='myTemplate' type='text/x-jquery-tmpl'>
Table of stuffs:
<table>
{{each value}}
<tr>
    <td>${name}</td>
    <td>${value}</td>
</tr>
{{/each}}
</table>
</script>
<div id="target">
</div>

和 JS：

var something = {};

var results = [{ name: 'First', value: 1 }, { name: 'Second', value: 2 }];

something.value = results;

$('#myTemplate').tmpl(something).appendTo('#target');