Question

我希望在user.balloons中为每个气球设置一个气球图像。如果user.balloons = 20，我想在屏幕上获得20个气球图像（在随机位置，如果有人想给我提示的话。）

这是我的第一个项目，很抱歉这么简单。我试过了：

{{#each user.balloon}} <img ... > {{/each}}

没有运气，目前尝试类似： JS：

Template.main.objects= function(){
  return [{name:"balloon",src:"/img/balloon.png", number: user.balloons},{{name:"partyhat",src:"/img/partyhat.png", number: user.partyhat}];
}

和html：

{{#each objects}}
  {{#each {{number}}}}
    <img src="{{src}}" style="margin-left:{{number}}%">
  {{/each}}
{{/each}}

但由于各种原因，这不起作用。任何帮助都会很棒。

（另外，我在将数据添加到如上所述的数组中时遇到了问题，Meteor似乎不喜欢它，有时会崩溃，如果我需要引用user.variables里面有人知道怎么解决这个问题？）

Answer 1

我会添加一个这样的帮手：

Template.main.balloons = function(n) {
   return _.range(n);
}

然后你可以制作任意数量的气球：

{{#each balloons 20}}
   <img...>
{{/each}}

在循环内部，{{this}}将返回当前索引，以防您因任何原因需要它。

显然，如果您总是希望使用user.balloons的值来表示气球数量，那么最好将其硬编码到模板助手中：

Template.main.balloons = function() {
   return _.range(Meteor.user().balloons);
}

然后在没有参数的情况下调用each。

我如何添加一些图像/元素，其中数字取决于user.variable？

1 个答案: