私はすでに流星のアプリケーションに入れようとしている拡張可能な/折り畳み可能なテーブル用のhtmlコードをいくつか持っています。 code here流星のテーブルにコレクションからのアイテムを入れます
私が気付いている主な問題は、流星アプリケーションでテーブルを作成しているときに、コレクションの新しいアイテム(上記の例のように)ごとに新しい展開可能な行が作成されないということです。現在、コレクション内のすべてのデータを1行に取り込みます。 (下の写真に見られるように)ここ
私の流星コード:
<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)">
ありがとう!