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] 元素绑定。在这种情况下，像您一样使用数组不是正确的方法。