javascript - Handlebars 如何呈现平面 JSON 对象

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:

For object iteration, use {{@key}} instead:

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

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

Answer 1

所以对于这种特殊情况，最流畅的方法可能是编写一个自定义迭代器。我更新了您的 fiddle ，修复了几个重大错误，并添加了一个列表迭代助手来实现您的目标。

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/

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

希望这对您有所帮助!