14

假设我有 JSON：

{
userinput: [
    {name: "brian", "value": "i like pies"},
    {name: "susan", "value": "memes are stupid"}
],
feedback: [
    {value: "i also like pies"},
    {value: "null"}
]
}

我正在尝试绘制这样的表格：

name ..... | input ......   | feedback
-----------|----------------|-----------------
brian      | I like pies    | I also like pies
susan      | mems are stupid| null

虽然我认识到将反馈作为“用户输入”的价值会更好，但我所拥有的并不是那样......

我正在尝试在 {{#each userinput}}` 中获取反馈索引，例如

{{#each userinput}}
<td>{{name}}</td><td>{{value}}</td><td>{{../feedback[@index].value}}</td>
{{/each}}

但当然{{../feedback[@index].value}}行不通。

获取反馈数组中匹配索引的值的最佳方法是什么（不改变 json 的结构）？

4

2 回答 2

15

这可以使用helperlookup来完成：

lookup帮助程序允许使用 Handlebars 变量进行动态参数解析。这对于解析数组索引的值很有用。

因此，您的示例模板如下所示： 

{{#each userinput}}
    <td>{{name}}</td>
    <td>{{value}}</td>
    <td>
        {{#with (lookup ../feedback @index)}}
            {{value}}
        {{/with}}
    </td>
{{/each}}
于 2015-09-17T21:12:19.077 回答
3

我想您将不得不为此编写一个块助手，因为它似乎@index只能用作独立的。

我修改了“列表”示例，以允许这样的模板： "{{#list userinput feedback}}<td>{{name}}</td><td>{{value}}</td><td>{{@feedback.value}}</td>{{/list}}". 实现是这样的，接受两个参数“输入”和“反馈”（加上标准的“选项”）。

Handlebars.registerHelper('list', function(input, feedback, options) {
  var out = "", data;

  // iterate over the input
  for (var i=0; i<input.length; i++) {
    if (options.data) {
      data = Handlebars.createFrame(options.data || {});

      // add "feedback" item to the current frame's data
      data.feedback = feedback[i];
    }

    out += "<tr>" + options.fn(input[i], { data: data }) + "</tr>";
  }

  return out;
});

这是小提琴。

于 2013-08-11T05:57:10.390 回答