Как я могу использовать другие значения шаблона в руле каждого помощника? - PullRequest
Новая
       30

Как я могу использовать другие значения шаблона в руле каждого помощника?

0 голосов
/ 11 сентября 2018

У меня есть блок данных JSON, который содержит массив (пример) 

var data = { firstName: "Alan", lastName: "Johnson", list: [1,2,3] };

Я хочу использовать синтаксис #each для циклического перемещения по элементам в массиве и создания строки для каждого элемента, который содержиткак элемент в массиве, а также другой кусок моих входящих данных JSON.Это то, что я пытаюсь: 

var ui  = "<p>{{lastName}}, {{firstName}}</p>";
ui  = ui + "{{#each list}}";
ui  = ui + "    {{this}} - {{ firstName }}";
ui  = ui + "{{/each}}";

var template = Handlebars.compile(ui);

console.log(template(data));

, но это не выводит то, что я ожидаю.Я получаю это (неправильно): 

<p>Johnson, Alan</p>    1 -     2 -     3 -

, но я ХОЧУ увидеть это: 

<p>Johnson, Alan</p>    1 -Alan     2 -Alan     3 -Alan

почему я не могу использовать другие части моих данных json в #каждый блок?Есть ли способ сделать это?

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Поскольку при использовании {{#each}} вы находитесь в дочернем контексте, который равен list, теперь вы хотите получить доступ к firstName, который находится в родительском контексте, вы можете использовать {{../firstName}} для доступаэто, как это. 

{{#each list}}
    {{this}} - {{../firstName}}
{{/each}}

Из документации ,

Вложенные каждый блок может обращаться к переменным итерации через пути на основе глубины.Например, для доступа к родительскому индексу можно использовать {{@ .. / index}}.

0 голосов
/ 11 сентября 2018

Я новичок на руле, поэтому не знал, какой термин мне нужно искать. Как оказалось, я смог найти ответ и хотел оставить свой вопрос на тот случай, если у кого-то еще возникнет такая же проблема. Как оказалось, причина, по которой вы не можете просто использовать {{firstName}} и получить Алан, как и ожидалось в моем примере, заключается в том, что вы находитесь в контексте «списка» в данных json. Чтобы вернуться к корню данных json, вам нужно использовать следующий синтаксис: 

var ui  = "<p>{{lastName}}, {{firstName}}</p>";
ui  = ui + "{{#each list}}";
ui  = ui + "    {{this}} - {{ ../firstName }}";
ui  = ui + "{{/each}}";

Вы можете видеть выше, что я использую {{../firstName}}, чтобы подняться на один уровень к корню, прежде чем запрашивать значение firstName. Это сработало для меня, и я надеюсь, что это может помочь кому-то еще.

...