2017-02-11 14 views
0

私はすでに流星のアプリケーションに入れようとしている拡張可能な/折り畳み可能なテーブル用のhtmlコードをいくつか持っています。 code here流星のテーブルにコレクションからのアイテムを入れます

私が気付いている主な問題は、流星アプリケーションでテーブルを作成しているときに、コレクションの新しいアイテム(上記の例のように)ごとに新しい展開可能な行が作成されないということです。現在、コレクション内のすべてのデータを1行に取り込みます。 (下の写真に見られるように)ここ

Expandable table with data in one row

私の流星コード:

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

だから私のメインの質問は、私は、各行があるように、新しい行に移入するコレクション内の各項目からデータを取得する方法について行く方法ですその1つのアイテムからの情報だけで展開できますか?

また、データターゲットと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)"> 

ありがとう!

答えて

0

正しい方法でブレーズを構成していません。あなたがしなければならないことは、テーブルの各行を適切なデータで繰り返すことです。代わりに、あなたがやっていることは、テーブル内の各キーを繰り返すことです(これは1度しか印刷されません)。

あなたは各生徒データの異なるセットを返すことを別のヘルパー(などstudent_namestudent_numberstudent_IDstudent_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>)を繰り返すされるであろう。その後、ドット表記を使用して生徒オブジェクトの任意の部分にアクセスできます。上記の構造を使用すると、問題の後半も解決できるはずです。

関連する問題