Question

如何在Meteor中将数组值加载到模板变量？请参阅以下代码并建议我该怎么做？

HTML代码：

 <template name="header">
 <div class="header">
    {{#each alphabets}}
       <div class="alphabets">{{this}}</div>
    {{/each}}
 </div>
</template>

JS代码：

 //the below array values are load dynamically above template
 var Alphas = ['ALL',
              'A', 'B', 'C', 'D','E', 'F',
              'G', 'H', 'I', 'J','K', 'L',
              'M', 'N', 'O', 'P','Q', 'R',
              'S', 'T', 'U', 'V','W', 'X',
              'Y', 'Z'
              ]

        Template.header.alphabets = function (i)
         {
           return Alphas[i];
         };

Answer 1

模板html：

<template name="header">
  <div class="header">
    {{#each alphabets}}
      <div class="alphabets">{{this}}</div>
    {{/each}}
  </div>
</template>

模板js：

var Alphas = ['ALL',
              'A', 'B', 'C', 'D','E', 'F',
              'G', 'H', 'I', 'J','K', 'L',
              'M', 'N', 'O', 'P','Q', 'R',
              'S', 'T', 'U', 'V','W', 'X',
              'Y', 'Z'];

Template.header.alphabets = function() {
  return Alphas;
};

我对此进行了测试，但确实有效。

基本上，你可以像游标一样传递数组，每个都会迭代它们。

如果您的数组中有键/值对，您也可以像mongo文档一样处理它们。

Answer 2

助手通常会返回整个数组，而不是单个索引元素。循环由{{#each}}块完成。所以你的助手不应该有参数，看起来就像那样：

Template.header.alphabets = function () {
    return Alphas;
};

你直接调用它，没有引用Alphas（因为你的模板不知道那个变量）。

{{#each alphabets}}
    <div class="alphabets">{{this}}</div>
{{/each}}

当您以这种方式思考时，这是非常自然的：对于#each的{{1}}元素，请打印包含alphabets元素的div。

Answer 3

Template.header.alphabets

depricated。

使用Template.templateName.helpers insteed。

<template name="newTextLabel">
  {{#each textType}}
  <span class="label label-primary pull-right">{{this}}</span>
  {{/each}}
</template>

Template.newTextLabel.helpers ({
    textType: function() {
    var xxx = ZZZ.findOne(this);
    return xxx.tag;
}
})

集合ZZZ包含名为'tag'

的数组的文档

Answer 4

而是遍历数组，您可以使用所有数组值，如下所示

<template name="alphabet-template">
  {{#if alphabets}}
    <div class="post-alphabet">
      <p> Element: {{alphabets}}</p>
    </div>
  {{/if}}
</template>

如何在Meteor JS中将数组值加载到模板变量？

4 个答案: