Handlebars JS получает элемент подмассива, используя переменную

У меня есть json с массивом объектов, каждый объект имеет свой собственный подмассив.

Я хочу получить значения из подмассива _History, используя значение в переменной _Year, которую я передаю в Handlebars js. Я могу заставить его работать, если я установлю значение непосредственно в коде 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}}

javascript handlebars.js handlebars.net
person Kathy Judd    schedule 10.05.2017    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Поскольку вы хотите выполнить динамический поиск, вам потребуется использовать помощник поиска, специально созданный для этого.

Помощник поиска позволяет динамически разрешать параметры с помощью переменных 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>

Рабочая демонстрация:

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>

person Marcos Casagrande    schedule 10.05.2017