Question

在我的Mongo数据库中，我有产品，每个产品都有图像。

enter image description here

我想知道如何将每个图像调用到Meteor模板中。我知道{{#each}}{{/each}}之类的内容已经存在，但我不知道如何捕获images对象。

使用此代码...

  Template.products.helpers({
    product: function () {
      return ProductList.find();
    }
  });

我可以调用第一张图片，如：

<img src="{{images.[0]}}" alt="{{title}}"/>

我可以硬编码剩下的图像，但我想动态地这样做。有什么提示吗？

编辑：这是预期的HTML输出（.content__product上的额外类是通过单独的函数动态添加的）：

<section class="content__products">
  <figure class="content__product selected">
    <img src="/images/product/tt-shirt-01.jpg" alt="Time Travel Tee">
  </figure>

  <figure class="content__product move-down">
    <img src="/images/product/tt-shirt-02.jpg" alt="Time Travel Tee">
  </figure>

  <figure class="content__product">
    <img src="/images/product/tt-shirt-03.jpg" alt="Time Travel Tee">
  </figure>
</section>

Answer 1

each适用于游标和数组，因此您可以执行以下操作：

{{#each products}}
  <h2>{{title}}</h2>
  {{#each images}}
    <img src={{this}} alt={{../title}}>
  {{/each}}
{{/each}}

推荐阅读：A Guide to Meteor Templates & Data Contexts

Answer 2

{{＃each}}只接受Mongo集合的数组或光标。因此，您必须将对象更改为数组并创建另一个模板。这是您的示例代码。

＆＃13;

if(Meteor.isClient){
  Template.product.helpers({
    list : function(){
      return Products.find({});
    }
  });
  
  Template.productImg.helpers({
    imgList: function(){
      var imgs = [];
      _.each(this.images, function(img){
        imgs.push({imgPath: img});
      });
      return imgs;
    }
  });
}

＆＃13;

<template name="product">
  {{#each list}}
    {{> productImg}}
  {{/each}}
</template>


<template name="productImg">
  {{#each imgList}}
    <img src="{{imgPath}}" alt="{{../title}}"/>
  {{/each}}
</template>

＆＃13;

Answer 3

对于单个产品页面，我会这样做：

Template.products.helpers({
    'products': function() {
        return ProductList.find();
    }
});

每个产品

多张图片：

<section class="content__products">
    {{#each products}}
        <figure class="content__product">
            {{#each images}}
                <img src="{{this}}" alt="{{../title}}">
            {{/each}}
        </figure>
    {{/each}}
</section>

每个产品

单张图片：

<section class="content__products">
    {{#each products}}
        <figure class="content__product">
            <img src="{{images.[0]}}" alt="{{../title}}">
        </figure>
    {{/each}}
</section>

Answer 4

好的，所以这里发布的代码帮助了我，但没有解决我的问题。以下是我更改代码的方式：

if (Meteor.isClient) {

  Template.products.helpers({
    product: function () {
      return ProductList.find();
    }
  });

  Template.product.helpers({
    imgList: function () {
      var imgs = [];

      _.each(this.images, function (img) {
        imgs.push({imgPath: img});
      });

      return imgs;
    }
  });

}

而且，我的模板：

<template name="product">
  <section class="content__products">
    {{#each imgList}}
      <figure class="content__product">
        <img src="/{{imgPath}}" alt="{{../title}}"/>
      </figure>
    {{/each}}
  </section>
</template>

如何使用Mongo / Meteor调用数组中的Object项？

4 个答案: