Заполнение таблицы в метеор с элементами из коллекции

Question

У меня уже есть код html для расширяемой/сборной таблицы, которую я пытаюсь помещать в приложение метеорита. code here

Моя основная проблема, с которой я столкнулась, заключается в том, что когда я заполняю таблицу в приложении метеорита, она не создает новую расширяемую строку для каждого нового элемента в моей коллекции (например, пример выше). В настоящее время он заполняет только одну строку всеми данными из коллекции. (Как показано на рисунке)

Вот мой метеор код:

<template name="adminPage"> 
<div class="container"> 
    <div class="col-md-12"> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Students Waiting</div> 
       <div class="panel-body"> 
        <table class="table table-condensed table-striped" id="outer-table"> 
         <thead id="top-heading"> 
          <tr> 
           <th></th> 
           <th >Name</th> 
           <th >Phone Number</th> 
           <th >VIP ID/USC ID</th> 
           <th >Current Status</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle"> 
           <td> 
            {{> expandButton}} 
           </td> 
           <td> 
            {{> listName}} 
           </td> 
           <td> 
            {{> listNumber}} 
           </td> 
           <td> 
            {{> listVIP}} 
           </td> 
           <td> waiting</td> 
          </tr> 
          <tr> 
           <td colspan="12" class="hiddenRow"> 
            <div class="accordian-body collapse" id="demo1"> 
             <table class="table table-striped"> 
              <thead id="innter-table"> 
               <tr class="info"> 
                <th id="inner-heading">Reason for Visit</th> 
                <th id="inner-heading">Current Major</th> 
                <th id="inner-heading">Intended Major</th> 
                <th id="inner-heading">Comments</th> 
                <th id="inner-heading"></th> 
               </tr> 
              </thead> 
              <tbody> 
               <tr> 
                <td> 
                 {{> listReason}} 
                </td> 
                <td> 
                 {{> listCurrent}} 
                </td> 
                <td> 
                 {{> listIntended}} 
                </td> 
                <td> 
                 {{> listComments}} 
                </td> 
                <td> 
                 {{> listDisclaimer}} 
                </td> 
               </tr> 
              </tbody> 
             </table> 
            </div> 
           </td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
     </div> 
    </div> 
</div> 

<template name="expandButton"> 
     <button class="btn btn-default btn-xs btn-circle"> 
      <span id="plus" class="glyphicon glyphicon-plus"></span> 
     </button> 

<template name="listName"> 
{{#each student_name}} 
    {{Name}} 
    <br> 
{{/each}} 

<template name="listNumber"> 
{{#each student_number}} 
    {{PhoneNumber}} 
    <br> 
{{/each}} 

<template name="listVIP"> 
{{#each student_ID}} 
    {{VipID}} 
    <br> 
{{/each}} 

<template name="listReason"> 
{{#each student_Reason}} 
    {{ReasonForVisit}} 
    <br> 
{{/each}} 

<template name="listCurrent"> 
{{#each student_Current}} 
    {{CurrentMajor}} 
    <br> 
{{/each}} 

<template name="listIntended"> 
{{#each student_Intended}} 
    {{IntendedMajor}} 
    <br> 
{{/each}} 

<template name="listComments"> 
{{#each student_Comments}} 
    {{Comments}} 
    <br> 
{{/each}} 

<template name="listDisclaimer"> 
{{#each student_Disclaimer}} 
    <button class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal" contenteditable="false"> 
     <span class="glyphicon glyphicon-edit"></span> 
    </button> 
    <button class="btn btn-default btn-sm"> 
     <span class="glyphicon glyphicon-trash"></span> 
    </button> 
    <br> 
{{/each}} 

Так что мой главный вопрос заключается в том, как я могу идти о получении данных от каждого элемента в коллекции, чтобы заполнить в новой строке, так что каждая строка расширяемый только с информацией из этого одного элемента?

Также как я могу настроить целевую и идентификационную информацию для уникального значения для каждого элемента в коллекции, чтобы строка только расширялась для соответствующих данных?

Например:

<tr data-toggle="collapse" data-target="#demo1" class="accordian toggle"> 

and 

<div class="accordian-body collapse" id="demo1"> 

using something like 

<tr data-toggle="collapse" data-target="#(persons id number)" class="accordian toggle"> 

and 

<div class="accordian-body collapse" id="(persons id number)"> 

Спасибо!

Answer 1

Вы не структурировали свое пламя в правильном направлении. То, что вам нужно делать, это повторять каждую строку таблицы с соответствующими данными в ней. Вместо этого вы повторяете каждую клавишу в таблице (которая только печатает один раз).

Похоже, что вы сделали много различных хелперов (student_name, student_number, student_ID, student_Reason и т.д.), каждый из возвращающих другой набор студентов данных?

Что вы хотите сделать, это создать единственный помощник, который возвращает весь объект-ученик, тогда вы сможете получить доступ к данным внутри этого объекта в правильных местах. Примером может быть

<tbody> 
    {{#each student in students}} 
     <tr data-target="{{student._id}}"> 
      <td> 
       {{student.name}} 
      </td> 
      <td> 
       {{student.reason}} 
      </td> 
      <td> 
       {{student.number}} 
      </td> 
      <td> 
       {{student.current}} 
      </td> 
     </tr> 
    {{/each}} 
</tbody> 

Код выше повторяет всю строку таблицы (<tr>) для каждого студента объекта в массиве студентов, что помощник возвращается. Затем вы можете получить доступ к любой части объекта-ученика с помощью точечной нотации. Используя вышеприведенную структуру, вы также сможете решить вторую половину своей проблемы.