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

Question

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

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

有没有办法遍历部件数组并执行嵌套的 {{#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

首先要意识到，您的 parts 助手 a) 不起作用并且 b) 无论如何都不是您需要的。

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

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

• b) 但这并不重要，因为您一开始就不需要助手。

您要对嵌套的#each 执行的操作是循环遍历数据库中的每个文档，然后在每个文档 中循环遍历@987654333 @数组。

嗯，您从 pieces 助手中获取 文档，每个文档都包含一个 parts 数组，您可以在不需要助手的情况下循环遍历它。

• c) 简单的解决方案

如果您只是删除 parts 帮助程序，您的代码应该可以工作。 Blaze 有一个查找顺序，您可以阅读有关here 的信息。这意味着当 Blaze 看到parts 时，首先会想到“有没有一个叫parts 的助手？” - 有，但它不起作用，所以什么也没有发生。

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

所以理论上最简单的解决方案就是去掉助手。

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

正如您从 lookup order 链接中看到的那样，通常不清楚 Spacebars/Blaze 中的内容是什么。您可以使用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}}

Answer 2

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

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;
  }
});

然后您可以迭代各个部分和部分。如果您想在嵌套的#each 中访问片段名称和部件名称。您可以使用{{../name}} 访问父数据上下文。

<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>