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或../ path语法结合@root data variable来使用@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}}

代码段/示例

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循环遍历数组值

1 个答案:

解决方案

代码段/示例