javascript - Meteor 中 2 个字段的双重迭代

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 循环，因此我很难弄清楚如何在助手中完成这项工作。我想过只有 1 个图像数组，然后循环遍历它，但这并不是我真正想要实现的目标，因为图像将具有不同的大小。嵌套的每个循环也不起作用。

任何帮助将不胜感激。

Answer 1

我认为通过一个简单的图像列表会让你自己变得更容易。您可以向架构添加一个附加属性，例如 bool 值“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=full，h=half)。

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