用集合中的项目填充流星中的表

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

所以我的主要问题是如何从集合中的每个项目中获取数据以填充到新行中，以便每一行都可以仅使用来自该项目的信息进行扩展？

另外，我将如何将数据目标和 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)">

谢谢！

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>)。然后，您可以使用点符号访问学生对象的任何部分。使用上面的结构，您应该也可以解决问题的后半部分。