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

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

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

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}} 访问父 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}) 并不意味着 "return the parts array from documents in the bandmusic collection"，这似乎是您希望它执行的操作。

{parts} 是 {parts: parts} 的 ES6 shorthand（参见）。但是你的函数没有变量 parts - 所以在你的 find 中，你真正说的是“找到符合条件 {parts: undefined}

的文档

b) 但这没关系，因为您一开始就不需要帮手。

您尝试对嵌套 #each 执行的操作是遍历数据库中的每个文档，然后在每个文档，遍历parts数组。

嗯，你从你的 pieces 助手那里得到了 documents，每个文档都包含一个 parts 数组，你可以循环遍历它而不需要帮手。

c) 简单的解决方案

如果您只删除 parts 助手，您的代码应该可以工作。 Blaze 有一个查找顺序，您可以阅读 here。这意味着当 Blaze 看到 parts 时，它首先想到的是 "is there a helper called parts?" - 它存在，但它不工作，所以什么也没有发生。

但是您想让它认为的是 "Is there a field in the current data context called parts" - 的确如此，但是 helpers 在查找顺序中排得更高，所以它永远不会到达那里。

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

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

正如您从 lookup order link 中看到的那样，通常不清楚 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}}

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

how to display objects in an array with spacebars

meteor

spacebars