Question

这个问题应该比较简单。我有一组我想要呈现的键值对的扁平对象。对于我的例子，我收到了这样定义的状态集合：

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/

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

Answer 1

因此对于这种特殊情况，最流畅的方法可能是编写自定义迭代器。我更新了你的小提琴，解决了几个突破错误，并添加了一个列表迭代助手，实现了你的目标。

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

希望这有帮助！

Handlebars如何渲染平面JSON对象

1 个答案: