У меня есть два массива с именами и фамилиями. Эти два массива содержат следующие значения:
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
🤔 А знаете ли вы, что...
Node.js предоставляет возможность создания собственных модулей для переиспользования кода.
Это можно сделать с помощью Помощник по поиску Handlebar, используя синтаксис ../ путь или Переменная данных @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>