简体   繁体   English

我怎样才能在 Handlebars 中做这种类型的数组?

[英]How can I do this type of Array in Handlebars?

I'm trying to recreate the following loop in Handlebars.我正在尝试在 Handlebars 中重新创建以下循环。

JAVASCRIPT VERSION - SAMPLE CODEPEN https://codepen.io/Len/pen/PozvRrd JAVASCRIPT 版本 - 示例 CODEPEN https://codepen.io/Len/pen/PozvRrd

As you see, it creates every combination from 2 arrays.如您所见,它从 2 个数组创建每个组合。 When I tried to convert the working JS code in handlebars as a helper, I get the error ..."Uncaught TypeError: Cannot read property 'forEach' of undefined."当我尝试将车把中的工作 JS 代码转换为帮助程序时,出现错误...“未捕获的类型错误:无法读取未定义的属性 'forEach'。”

I tried to find a working version of this in handlebars, I've found some things but did not find the same generated results as the code pen.我试图在把手中找到这个的工作版本,我找到了一些东西,但没有找到与代码笔相同的生成结果。

My questions are below....我的问题如下......

1 - What kind of loop is this called, when you iterate over each and every combination as you see in the output? 1 - 当您在输出中看到的每个组合都进行迭代时,这称为哪种循环?

2 - Can someone point me to a sample of this being done in Handlebars? 2 - 有人可以指出我在 Handlebars 中完成的示例吗?

Heres the code in Javascript that I'm trying to convert to Handlbars.这是我试图转换为 Handlbars 的 Javascript 代码。 I have oral surgery tmrw, sorry if I am slow getting back.我有口腔手术 tmrw,对不起,如果我回来很慢。 Thanks in advance!提前致谢!

let arrayOne = [
  1,2,3,4,5
]

let arrayTwo = [
  "a","b","c","d","e"
]

arrayOne.forEach(printArrayOne);

function printArrayOne(item, index){  
  arrayTwo.forEach((value) => {
    document.getElementById("demo").innerHTML += item + ' - ' + value + "<br>";
  });
}

// OUTPUT
1 - a
1 - b
1 - c
1 - d
1 - e
2 - a
2 - b
2 - c
2 - d
2 - e
3 - a
3 - b
3 - c
3 - d
3 - e
4 - a
4 - b
4 - c
4 - d
4 - e
5 - a
5 - b
5 - c
5 - d
5 - e

It looks like the best way is to review approach and use computed data in handlebars template, but anyway, regarding to questions:看起来最好的方法是审查方法并在车把模板中使用计算数据,但无论如何,关于问题:

1 - It looks like a nested loop 1 - 它看起来像一个嵌套循环

2 - Using existing data structures it's possible to loop in the same way as in JavaScript: 2 - 使用现有的数据结构,可以像在 JavaScript 中一样进行循环:

{{#each arrayOne}}
   {{#each ../arrayTwo}}
      {{../this}} - {{this}}<br>
   {{/each}}
{{/each}}

Access to iteration variables within nested block described here , in last paragraph of #each helper description.访问这里描述的嵌套块中的迭代变量,在#each helper 描述的最后一段。

Example: https://jsfiddle.net/rh86gst0/示例: https : //jsfiddle.net/rh86gst0/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM