使用集合中的項目填充流星中的表格

我已經爲可擴展/可摺疊表格添加了一些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}}

所以我的主要問題是如何去有關從每個項目獲得的集合中的數據在一個新行來填充，使每行是隻有來自該項目的信息可擴展？

另外我該如何去設置數據目標和id爲集合中的每個項目的唯一值，以便該行只擴展它的相應數據？

例如：

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

謝謝！

來源

2017-02-11 E. Pace

你還沒有以正確的方式組織你的火焰。你需要做的是重複表中的每一行，並在其中包含適當的數據。相反，你正在做的是重複表中的每個鍵（這只是打印一次）。

看起來你已經做了很多不同的傭工（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>）。然後，您可以使用點符號訪問學生對象的任何部分。使用上面的結構，你應該能夠解決你的問題的後半部分。

來源

2017-02-11 13:22:55 Sean

使用集合中的項目填充流星中的表格

回答

相關問題