Question

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

我想使用_Year变量中的值从_History子数组中获取值，并将其传递给Handlebars js。如果我将值直接设置到代码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"
            }
        ]

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。

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

{{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使用变量获取子数组项

1 个答案: