使用把手遍历数组值 #each 循环

Question

我有两个名为名字和姓氏的数组。这两个数组的值如下：-

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

Answer 1

解决方案

这可以使用 Handlebar's lookup helper using either the ../ path or @root data variable syntax in combination with the @key data variable 来完成。使用 ../ 或 @root 是必要的，因为 #each 创建了一个新的上下文。换句话说，firstnames 中的每个对象都是新的上下文，因此有必要回到根范围，因为那是 lastnames 所在的位置。

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

Snippet/Example

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>

使用把手遍历数组值 #each 循环

Iterating through the array values using handlebars #each loop

node.js

handlebars.js

handlebarshelper

express-handlebars

解决方案

Snippet/Example