как отображать объекты в массиве с помощью пробелов - PullRequest
Новая
       32

как отображать объекты в массиве с помощью пробелов

0 голосов
/ 20 января 2019

Это может быть повторяющийся вопрос, но мне еще предстоит найти решение моей конкретной проблемы.У меня есть БД, настроенная так: 

{ "_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})
} })

Ответы [ 2 ]

0 голосов
/ 20 января 2019

Первое, что нужно понять, это то, что ваш parts помощник а) не работает и б) это не то, что вам нужно.

  • a) bandmusic.find({parts}) не означает «вернуть массив частей из документов в коллекции bandmusic», что, как вам кажется, и требуется.

{parts} является сокращением ES6 для {parts: parts} (см. этот ответ ). Но ваша функция не имеет переменной parts - поэтому в вашем find вы на самом деле говорите «найдите документы, которые соответствуют условию {parts: undefined}

  • б) Но это не имеет значения, потому что вам здесь не нужен помощник.

То, что вы пытаетесь сделать со своим вложенным #each, это циклически проходить через каждый документ в базе данных, а затем внутри каждого документа проходить циклически по массиву parts .

Ну, вы получаете документы от вашего pieces помощника, и каждый документ содержит массив parts, который вы можете просто циклически проходить без помощи помощника.

  • в) Простое решение

Ваш код должен работать, если вы просто удалите помощник parts. Blaze имеет порядок поиска, который вы можете прочитать о здесь . Это означает, что когда Blaze видит parts, он сначала думает: «Есть ли помощник по имени parts?» - который есть, и он не работает, так что ничего не происходит.

Но вы хотите, чтобы он подумал: «Есть ли в текущем контексте данных поле с именем parts», - оно есть, но helpers идет выше в порядке поиска, поэтому оно никогда не попадает туда.

Таким образом, самое простое теоретическое решение - удалить помощника.

  • d) Более четкое решение и лучшая практика

Как видно из ссылки lookup order, часто неясно, что относится к тому, что в пробелах / Blaze. Вы можете сделать вещи намного понятнее, используя синтаксис, описанный в документах Blaze для 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}}
0 голосов
/ 20 января 2019

Вам не нужно создавать двух помощников.Работает только ваш первый помощник: 

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