javascript - Meteor - 如何使用 {{each}} 在表中显示 mongoDB 中的多个数组？

Question

我在 mongoDB 中有一个名为“pIds”的集合，并且包含多个数组:

{
    "_id" : "Coms>f41a3480af751a7a",
    "pIds" : [ 
        "pid_833d82c2f32b7dc0", 
        "pid_833d82c2f32b7dc0", 
        "pid_833d82c2f32b7dc0", 
    ],
    "dudes" : [ 
        "AB", 
        "AC",
        "BC" 
    ],
    "ho" : [ 
        "Coms>f41a3480af751a7a", 
        "Coms>f41a3480af751a7a", 
        "Coms>f41a3480af751a7a"
    ],
    "ps" : [ 
        "vf", 
        "ou", 
        "rwf"
    ],

}

现在我想将这些元素动态渲染到 HTML 表中，以便表的更改方式与集合中数据的更改方式相同。因此，当新元素写入集合“pIds”时，表应该自动添加新元素。我考虑过使用{{each}}。

JS 助手:

Template.home.helpers({ 
  'pIdsRendering': function() {
   if (Meteor.userId()) {
  var pId = pIds.find({'_id': Session.get('pIdshome')}).fetch();

    return pId;
  }
},
});

HTML:

                        <tbody>

{{#each pIdsRendering}}

        {{#each pIds}}

                            <tr><td>{{this}}</td></tr>
            {{/each}}
{{/each}}

{{#each pIdsRendering}}

        {{#each dudes}}

                            <tr><td>{{this}}</td></tr>

         {{/each}}

  {{/each}}
            [...and so on...] 

                        </tbody>

实际上，这可行，并且新元素已添加到表格中，但我只是无法将内容放入表格的正确单元格中。它将内容全部放在一列中，就像表的数据会这样写:

所以，我认为这是关于“逻辑顺序”，但我就是无法完成它......最后表格应该如下所示:

Answer 1

您为每个数组项创建新的 <tr>标签，这就是为什么每个项目都在新行中的原因。我建议您稍微更改一下您的集合架构。我会像下面这样做:

{
  "_id" : "Coms>f41a3480af751a7a",
  "data": [
    {
      "pid": "pid_833d82c2f32b7dc0",
      "dude": "AB",
      "ho": "Coms>f41a3480af751a7a",
      "ps": "vf"
    },
    {
      "pid": "pid_833d82c2f32b7dc0",
      "dude": "AC",
      "ho": "Coms>f41a3480af751a7a",
      "ps": "ou"
    }    
  ]
}

然后在您的 Blaze 模板中您可以更轻松地显示记录

{{ #each record }}
  {{ #each data }}
    <tr>
      <td>{{ pid }}</td>
      <td>{{ dude }}</td>
      <td>{{ ho }}</td>
      <td>{{ ps }}</td>
    </tr>
  {{ /each }}
{{ /each }}

您的实际架构可能会导致意外错误。例如当 pIds数组的元素数量将多于 dudes 。验证它更加困难。通过使用对象，您可以更轻松地做到这一点。另外，我猜您想将 pIds[index] 元素与 dudes[index] 元素绑定(bind)。在这种情况下，像您一样使用数组并不是正确的方法。