用 collection 中的项目填充流星中的 table

Question

我已经有一些 html 的 expandable/collapsible table 代码，我正试图将其放入 meteor 应用程序中。 code here

我遇到的主要问题是，当我在 meteor 应用程序中填充 table 时，它没有为我的 collection 中的每个新项目创建一个新的可扩展行（比如上面的例子）。目前它只用 collection 中的所有数据填充一行。（如下图所示）

这是我的流星代码：

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

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

此外，我如何将 data-target 和 id 设置为 collection 中每个项目的唯一值，以便该行仅针对其对应的数据展开？

例如：

<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

你没有以正确的方式组织你的火焰。您需要做的是重复 table 的每一行，其中包含适当的数据。相反，您正在做的是重复 table 中的每个键（只打印一次）。

看起来你制作了很多不同的助手（student_name、student_number、student_ID、student_Reason 等），每个 return 一组不同的学生数据？

您想要做的是创建一个 return 整个学生对象的助手，然后您可以在正确的位置访问该对象中的数据。一个例子是

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

上面的代码为助手正在 returning 的学生数组中的每个学生对象重复整个 table 行 (<tr>)。然后，您可以使用点表示法访问学生对象的任何部分。使用上面的结构你应该也能解决你问题的后半部分。

用 collection 中的项目填充流星中的 table

Populating a table in meteor with items from collection

html

mongodb

meteor

expandable-table