Question

这可能是一个重复的问题，但是我还没有找到解决我特定问题的方法。我有这样的数据库设置：

{ "_id" : ObjectId("5c43b0e463ad7e8adfa4f07a"), "name" : "The Box", "price" : "80", "parts" : [ { "pname" : "piccolo", "pprice" : "3" }, { "pname" : "Flute 1", "pprice" : "3" } ] }

有没有一种方法可以遍历parts数组并进行嵌套的{{#each}}循环，以便可以显示每个文档的名称以及名称中的每个部件？到目前为止我的代码：

<tbody>
                    {{#each pieces}}
                    <tr class="itemList">
                        <td class="name">{{name}}</td>
                        <td class="pdf">PDF</td>
                        <td class="audio">AUDIO</td>
                        <td class="format">FORMAT</td>
                        <td class="price" >${{price}}</td>
                        <td><input class ="qty" type ="number" name ="quantity" value="0"></td>
                    </tr>
                    {{#each parts}}
                    <tr>
                        <td colspan="3"></td>
                        <td class="partName">{{pname}}</td>
                        <td class="partPrice">{{pprice}}</td>
                        <td><input class="partQty" type="number" name="quantity" value="0"></td>
                    </tr>
                    {{/each}}
                    {{/each}}
                </tbody>

和我的助手：

   Template.band.helpers({
pieces: function(){
    return bandmusic.find({})
},
parts: function(){
    return bandmusic.find({parts})
} })

Answer 1

您不必创建两个助手。只需使用您的第一个助手即可。

Template.hello.helpers({
  pieces() {
    let data = [{
      "_id": "5c43b0e463ad7e8adfa4f07a",
      "name": "The Box",
      "price": "80",
      "parts": [
        { "pname": "piccolo", "pprice": "3" },
        { "pname": "Flute 1", "pprice": "3" }
      ]
    }]

    return data;
  }
});

然后，您可以在零件和零件上进行迭代。如果要在嵌套的内部访问＃每个零件名称和零件名称。您可以使用{{../name}}访问父Datacontext。

<table class="table">
  <tbody>
    {{#each pieces}}
    <tr class="itemList">
      <td class="name">{{name}}</td>
      <td class="pdf">PDF</td>
      <td class="audio">AUDIO</td>
      <td class="format">FORMAT</td>
      <td class="price">${{price}}</td>
      <td><input class="qty" type="number" name="quantity" value="0"></td>
    </tr>
      {{#each parts}}
      <tr>
        <td colspan="3">{{../name}}</td>
        <td class="partName">{{pname}}</td>
        <td class="partPrice">{{pprice}}</td>
        <td><input class="partQty" type="number" name="quantity" value="0"></td>
      </tr>
      {{/each}}
    {{/each}}
  </tbody>
</table>

但是使用{{#each}}块不是一个好习惯，您应该使用{{#each in}} 。 {{#each in}}块创建一个易于使用的变量。

<table class="table">
  <tbody>
    {{#each piece in pieces}}
    <tr class="itemList">
      <td class="name">{{piece.name}}</td>
      <td class="pdf">PDF</td>
      <td class="audio">AUDIO</td>
      <td class="format">FORMAT</td>
      <td class="price">${{piece.price}}</td>
      <td><input class="qty" type="number" name="quantity" value="0"></td>
    </tr>
      {{#each part in piece.parts}}
      <tr>
        <td colspan="3">{{piece.name}}</td>
        <td class="partName">{{part.pname}}</td>
        <td class="partPrice">{{part.pprice}}</td>
        <td><input class="partQty" type="number" name="quantity" value="0"></td>
      </tr>
      {{/each}}
    {{/each}}
  </tbody>
</table>

Answer 2

首先要意识到的是您的parts助手a）无效，b）仍然不是您所需要的。

a）bandmusic.find({parts})并不意味着“从bandmusic集合中的文档中返回部件数组”，这似乎是您希望它执行的操作。

{parts}是{parts: parts}的ES6缩写（请参见this answer）。但是您的函数没有变量parts-因此，在您的find中，您真正要说的是“查找符合条件{parts: undefined}的文档

b）但这并不重要，因为您首先不需要在这里使用帮助程序。

您要使用嵌套的#each进行的操作是遍历数据库中的每个文档，然后在每个 document 中循环遍历parts数组。

好吧，您从pieces帮助者那里获得了文档，每个文档都包含一个parts数组，您可以在不需要帮助者的情况下进行遍历。

c）简单的解决方案

如果您仅删除parts帮助器，则您的代码应该可以使用。 Blaze有一个查询顺序，您可以阅读有关here的内容。这意味着当Blaze看到parts时，首先想到“是否有一个名为parts的助手？” -有，但没有用，所以什么也没发生。

但是您想要的是“当前数据上下文中是否存在一个名为parts的字段”-存在，但是helpers的查找顺序更高，因此它永远不会到达那里

因此，理论上最简单的解决方案是删除帮助程序。

d）更清晰的解决方案和最佳实践

从lookup order链接可以看到，通常不清楚空格键/火焰中的含义。您可以使用Blaze docs for each

中描述的语法使事情更清晰

您应该引入一个新变量来引用数组中的当前项目，而不是#each array-#each item in array。然后照常访问项目的属性-item.prop1 - item.prop2

因此您的新代码变为：

{{#each piece in pieces}}
  <tr class="itemList">
    <td class="name">{{piece.name}}</td>
    <td class="pdf">PDF</td>
    <td class="audio">AUDIO</td>
    <td class="format">FORMAT</td>
    <td class="price" >${{piece.price}}</td>
    <td><input class ="qty" type ="number" name ="quantity" value="0"></td>
  </tr>
  {{#each part in piece.parts}}
    <tr>
      <td colspan="3"></td>
      <td class="partName">{{part.pname}}</td>
      <td class="partPrice">{{part.pprice}}</td>
      <td><input class="partQty" type="number" name="quantity" value="0"></td>
    </tr>
  {{/each}}
{{/each}}

如何用空格键显示数组中的对象

2 个答案: