在 {{each}} 助手中使用 ReactiveVar答案

【问题标题】：Use ReactiveVar in {{each}} helper在 {{each}} 助手中使用 ReactiveVar
【发布时间】：2015-05-15 21:08:09
【问题描述】：

我的助手中有一个 ReactiveVar，它返回许多要放置在模板中的照片

photoCount:->
    Template.instance().rvPhotoCount.get()

现在我需要使用 photoCount 返回的 # of img 以反应方式填充我的 html。我尝试使用 {{each photoCount}}<img> 但收到错误 {{#each}} currently only accepts arrays, cursors or falsey values.
我该如何解决这个问题？

【问题讨论】：

标签： meteor meteor-helper

【解决方案1】：

{{#each}} 运算符用于迭代一系列事物，例如，在您的情况下，是图像列表。

目前您正在传递{{#each}} 您拥有的数量张图片。而each 不知道如何迭代单个数字！

如果你想显示每一个图像，你应该传递each图像列表本身，以数组或光标的形式：

{{#each images}}<img src={{src}} />{{/each}}

如果您只想显示数量张图片，只需使用{{photoCount}}！

<p>There are {{photoCount}} images.</p>

如果您只想打印多个相同的“静态”img，则必须在帮助程序中预处理数组：

  photoCount: function(){
    var countArr = [];
    var count = Template.instance().rvPhotoCount.get();
    for (var i=0; i<count; i++){
      countArr.push({});
    }
    return countArr;
  }

并在上面使用{{#each}}。遗憾的是，Meteor 在内置模板功能方面非常有限。

【讨论】：

谢谢！但我需要被动地更改页面上的图像数量。那么当我按下按钮 A 时，如何告诉 Meteor：give me <img> 5 times？当我按下按钮 B make them 3 <img>'s instead of 5.
您证实了我对解决方案的想法。谢谢。

【解决方案2】：

我决定将帮助程序输出更改为数组以进行解决。
为了填充数组，我使用 coffeescript 数组切片。

photoCount:->
    count=Template.instance().rvPhotoCount.get()
    array=[1..count]

【讨论】：