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

Question

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

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

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

我传给handlebars 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

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

The lookup helper allows for dynamic parameter resolution using Handlebars variables. This is useful for resolving values for array indexes.

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

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

您可以为此使用 subexpression：

<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>

工作演示：

var data = {
 "_Person": [{
  "_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"
 }],
 "_Year": "2018"
};

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;
});

var source   = $("#template").html();
var template = Handlebars.compile(source);

$("#output").html(template(data));

td {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v4.0.5.js"></script>

<script id="template" type="text/x-handlebars-template">
  {{#each _Person}}
        <tr>
            <td nowrap>{{FirstName}}</td>
            <td nowrap>{{LastName}}</td>
            <td nowrap>{{lookup (lookup _History ../_Year) 'Testa'}}</td>  <-- It Works now-->
            <td nowrap>{{lookup (lookup _History ../_Year) 'Testb'}}</td>  <-- It Works now-->
            <td nowrap>{{coolerLookup _History ../_Year 'Testa'}}</td> <!-- deal with it -->
        </tr>
  {{/each}}
</script>

<div id="output"></div>

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

Handlebars JS get the subarray item using variable

javascript

handlebars.js

handlebars.net