Question

我想在Meteor应用程序中显示同一集合的2个字段中的图像。我正在使用aldeed的SimpleSchema和autoform，如下所示：

fullwidthImage: {
  type: [String],
},
"fullwidthImage.$" : {
  autoform: {
    afFieldInput: {
      type: 'fileUpload',
      collection: 'Images'
    }
  }
},
halfwidthImage: {
  type: [String],
},
"halfwidthImage.$" : {
  autoform: {
    afFieldInput: {
      type: 'fileUpload',
      collection: 'Images'
    }
  }
}

只要阵列中有图像，我就会尝试显示1个全宽（FW）图像，然后显示2个半宽（HW）。非常喜欢这样：

<------FW 1------>
<--HW 1 | HW 2 -->
<------FW 2------>
<--HW 3 | HW 4 -->

由于我们无法在模板中使用 For循环，因此我很难弄清楚如何在帮助器中完成这项工作。我想过只有一个图像阵列，并循环通过它，但这不是我想要实现的，因为图像将具有不同的大小。嵌套每个循环也不起作用。

非常感谢任何帮助。

Answer 1

我认为你可以通过单一的平面图像列表让自己变得更容易。你可以在模式中添加一个额外的属性，比如布尔“isFullSize”，并跟踪不同大小的图像。

否则，您正在考虑在发布或客户端上合并2个平面列表。

如果您确实将其设为单个平面列表，则可以执行以下操作：

<template name="PhotoFest">
    {{#each photo in photos}}
        {{#if photo.isFullSize}}
            {{> RenderFullSizePhoto photo=photo}}
        {{else}}
            {{> RenderHalfSizePhoto photo=photo}}
        {{/if}}
    {{/each}}
</template>

CSS会有点棘手，但这会处理你的循环。

现在困难的部分是以正确的顺序获取数据，例如：F，h，h，F，h，h，F，h，h（其中F =完全且h =一半）。

这实际上取决于数据的来源。如果你完全掌控，并且可以订购它，那太好了。您可以在模式中添加一个名为“序数”的模式字段，只需对照片1到n进行编号。在您的发布中，您可以对其进行排序。

在Meteor中对2个字段进行双重迭代

1 个答案: