Перебор значений массива с помощью руля #each loop - PullRequest
Новая
       84

Перебор значений массива с помощью руля #each loop

0 голосов
/ 18 октября 2018

У меня есть два массива с именами и фамилиями.Эти два массива содержат следующие значения: - 

firstnames =[ 'A', 'B', 'C','D','E' ]
lastnames =['a','b','c','d','e']

Я отображаю эти два массива на моей веб-странице следующим образом: - 

res.render('sample',{firstnames:firstnames,lastnames:lastnames})

Используя цикл #each-помощник в руле, я смог отобразить имена на веб-странице таким образом, что сначала появляются все имена, а затем все фамилии, используя это: - 

  {{#each firstname}}
  <h1>{{this}}</h1>
    {{/each}}

    {{#each lastname}}
   <h1>{{this}}</h1>
    {{/each}}

И вывод был некоторыйчто-то вроде: - 

A 
B
C
D
E
a
b
c
d
e

Но как я могу отображать данные таким образом, что за каждым именем должно следовать каждое имя.Как показано ниже: - 

A
a
B
b
C
c
D
d
E
e

1 Ответ

0 голосов
/ 18 октября 2018

Решение

Это можно сделать с помощью помощника по поиску на руле , используя ../ path или @root переменную данных синтаксис в сочетании с @key переменной данных .Использование ../ или @root необходимо, потому что #each создает новый контекст.Другими словами, каждый объект в firstnames будет новым контекстом, поэтому необходимо вернуться в корневую область, потому что именно там находится lastnames. 

{{#each firstnames}}
    <h1>{{this}}</h1>
    <h1>{{lookup @root.lastnames @key}}</h1>
    // OR
    <h1>{{lookup ../lastnames @key}}</h1>
{{/each}}

Фрагмент / Пример

var data = {
  firstnames: [ 'A', 'B', 'C','D','E' ],
  lastnames: ['a','b','c','d','e']
};

var source = $('#entry-template').html();
var template = Handlebars.compile(source)(data);

$('body').html(template)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>

<script id="entry-template" type="text/x-handlebars-template">
{{#each firstnames}}
    <h1>{{this}}</h1>
    <h1>{{lookup ../lastnames @key}}</h1>
{{/each}} 
</script>
...