Question

我有Javascript对象，如：

var data = {
    Id: 1,
    Name: "Some name",
    Days: [true, true, true, false, false, true, false]
};

这些对象是在客户端生成的，我想通过使用jQuery.tmpl插件来可视化它们。我已经定义了一个模板：

<ul class="days">
{{each Days}}
    <li class="day {{if $value}}on{{else}}off{{/if}}">${$index + 1}</li>
{{/each}}
</ul>

当我打电话

$("<ul class='days'>...</ul>").tmpl(data);

我只获得了一组LI元素，并且没有包裹UL ...

我在这里缺少什么？

Answer 1

我创建了一个fiddle here，但它确实有效。的模板

<script id="daysTemplate" type="text/x-jquery-tmpl"> <ul class="days"> {{each Days}} <li class="day {{if $value}}on{{else}}off{{/if}}">${$index + 1}</li> {{/each}} </ul> </script>

<强>脚本

var data = { Id: 1, Name: "Some name", Days: [true, true, true, false, false, true, false] }; $("#daysTemplate").tmpl(data).appendTo('body');

Answer 2

您需要将该模板代码移动到<script>元素（如果您还没有），如下所示：

<script type="text/x-jquery-tmpl" id="daysTemplate">
  <ul class="days">
  {{each Days}}
    <li class="day {{if $value}}on{{else}}off{{/if}}">${$index + 1}</li>
  {{/each}}
  </ul>
</script>

然后，选择并渲染该模板：

// You can inject the result into any container, using methods like appendTo()
//  html(), insert(), etc.
$('#daysTemplate').tmpl(data).appendTo('body');

jQuery.tmpl数组类型属性的问题

2 个答案: