1

这个问题应该比较简单。我有一组要渲染的键值对平面对象。对于我的示例，我收到一组这样定义的状态：

var an_array=[
{AK:"Alaska"},
{WA:"Washington"},    
];

我因此编译了一个 Handlebars 模板：

var source   = $("#src").html();
var template = Handlebars.compile(source);
$("body").append( template(an_array) );

模板未呈现数组：

<script type='text/template' id='src'>
<ul>
{{#each .}}
<li>{{@key}}</li>
{{/each}}
</ul>    
</script>

来自 www.handlebars.js：

对于对象迭代，请改用 {{@key}}：

差不多就是这样。我在这里写了一个jsfiddle：http: //jsfiddle.net/eggmatters/yMasE/

我有几个从服务器返回的大型数组，我想按原样渲染这些对象，而不是重新格式化它们等。

4

1 回答 1

3

所以对于这种特殊情况，最流畅的方法大概就是写一个自定义的迭代器了。我更新了你的小提琴，修复了几个重大错误，并添加了一个列表迭代助手来实现你所追求的。

Handlebars.registerHelper('list', function(ctx, opts) {
  var res = ''
  ctx.forEach(function(obj){
    var key = Object.keys(obj);
    var data = {key: key, val: obj[key]}
    res += opts.fn(obj, { data: data });
  });
  return res;
});

var an_array = [{AK:"Alaska"}, {WA:"Washington"}];
var source = $("#src").html();
var template = Handlebars.compile(source);
$("body").append(template(an_array));

使用此迭代器，您可以将模板更新为如下所示，并且它会正确呈现：

<ul>
  {{#list .}}
    <li>{{@key}}: {{@val}}</li>
  {{/list}}
</ul>

现场示例：http: //jsfiddle.net/yMasE/2/

自定义迭代器在把手中的工作方式有点令人困惑，但您可以在此处找到一些详细信息：http: //handlebarsjs.com/block_helpers.html

希望这可以帮助！

于 2013-09-18T19:10:46.647 回答