将值从数组传递到流星中的子模板

Question

我一直在努力解决以下问题：

我有两个模板：

intervalsList
intervalIcon

我希望 intervalsList 填充 intervalIcons.

的列表

每个intervalIcon显示一个数字；有这些数字的数组：

[1, 5, 10, 15, 30, 45, 60]

intervalsList 模板遍历此数组，为每个索引实例化一个 intervalIcon：

{{#each interval}}
    {{> intervalIcon}}  
{{/each}}

interval 定义为一个数组，作为 intervalsList 的助手：

Template.intervalsList.helpers({
    'interval': [1, 5, 10, 15, 30, 45, 60]
});

这行得通。实例化了许多与数组大小相对应的间隔。

但是，我仍然需要在一个区间内显示数组中每个索引的数字。（例如，在列表项中。）

例如

数组[1, 5, 10, 15, 30, 45, 60]输出：

1
5
10
15
30
45
60

我尝试了以下方法：

<template name="intervalsList">
  {{#each interval}}
    {{> intervalIcon data={{this}} }}
  {{/each}}
</template>

哪个在运行时不被接受：

    While building the application:
client\views\settingsGeneral\settingsGeneral.html:18: Expected identifier, number, string, boolean, or null
...{> intervalIcon data={{this}}}}  
    {{/eac...
                        ^

我使用两个模板而不是一个模板，因为第二个模板 (intervalIcon) 包含一个 Chart.js 图表，该图表非常复杂，我想将其与第一个模板分开模板。

如何将在 intervalList 的 #each 循环期间检索到的 interval 数组的值传递给子模板，以便我可以在那里使用它？

我看过这个问题：Is there a way to pass variables into templates in Meteor? 它提到了一些关于使用 ../ 来引用嵌套模板的父级数据上下文的内容，但我并没有真正理解它。

非常感谢！！

Answer 1

无需显式将当前迭代的项目传递给子模板，它由 Spacebars 自动完成。

在您的 intervalIcon 模板中，您可以使用 {{this}} 引用项目值。

<template name="intervalIcon">
  <p>{{this}}</p>
</template>

您还可以通过将数组值替换为对象来为间隔值命名：

JS

Template.intervalsList.helpers({
  interval: function(){
    return [1, 5, 10, 15, 30, 45, 60].map(function(value){
      return {
        value: value
      };
    });
  }
});

HTML

<template name="intervalIcon">
  <p>{{value}}</p>
</template>

将值从数组传递到流星中的子模板

Passing values from an array to child template in meteor

arrays

static

templates

nested

meteor