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

Question

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

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

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

我传递给 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"
            }
        ]

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