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

使用集合

1 个答案: