Handlebars JS 使用变量获取子数组项

Question

我有一个带有对象数组的 json，每个对象都有自己的子数组。

我想使用传递给 Handlebars js 的 _Year 变量中的值从 _History 子数组中获取值。如果我将值直接设置到代码 ex: 中，我可以让它工作{{_History.[2018].Testa}}。

是否可以设置 _Year 的值并使车把获得正确的子数组？

我传递给把手 js 的参数值。

    var params = {
        _Person: "THE JSON",
        _Year: "2018"
    };

JSON 代码：

        [
            {
            "_History": {
                "2017": {
                "Testa": "Test 1",
                "Testb": "Test 2"
                },
                "2018": {
                "Testa": "Test 3",
                "Testb": "Test 4"
                }
            },
            "FirstName": "John",
            "LastName": "Doe"
            },
            {
            "_History": {
                "2017": {
                "Testa": "Test 5",
                "Testb": "Test 6"
                },
                "2018": {
                "Testa": "Test 7",
                "Testb": "Test 8"
                }
            },
            "FirstName": "Susan",
            "LastName": "Doe"
            }
        ]

车把JS模板：

        {{#each _Person}}
        <tr>
            <td nowrap>{{FirstName}}</td>
            <td nowrap>{{LastName}}</td>
            <td nowrap>{{_History.[2018].Testa}}</td>      <-- Works
            <td nowrap>{{_History.[../_Year].Testa}}</td>  <-- Doesn't Work
            <td nowrap>{{_History.[../@_Year].Testa}}</td> <-- Doesn't Work
            <td nowrap>{{_History.[@../_Year].Testa}}</td> <-- Doesn't Work
        </tr>
        {{/each}}

Answer 1

由于您要执行动态查找，因此您需要使用专门为此构建的查找助手。

查找助手允许使用 Handlebars 变量进行动态参数解析。这对于解析数组索引的值很有用。

{{lookup _History ../_Year}} //Object

动态查找后，您将需要执行另一个访问'Testa'或'Testb'

您可以为此使用子表达式：

<td nowrap>{{lookup (lookup _History ../_Year) 'Testa'}}</td>

如果您不喜欢使用子表达式或需要更深入的查找，我制作了一个自定义助手，它更易于使用：

Handlebars.registerHelper('coolerLookup', function(){
   var args = [].slice.call(arguments);

   var block = args.pop();
   var object = args.shift();

   var value = args.reduce(function(a, b) {
      return a[b];
   }, object);

   return value;
});

现在你可以这样做：

<td nowrap>{{coolerLookup _History ../_Year 'Testa'}}</td>
<td nowrap>{{coolerLookup _History ../_Year 'deep' 'deeper' 'property'}}</td>

工作演示：

{{lookup _History ../_Year}} //Object

<td nowrap>{{lookup (lookup _History ../_Year) 'Testa'}}</td>

Handlebars.registerHelper('coolerLookup', function(){
   var args = [].slice.call(arguments);

   var block = args.pop();
   var object = args.shift();

   var value = args.reduce(function(a, b) {
      return a[b];
   }, object);

   return value;
});