Meteor 1.3 和引导程序忽略 #each 中的 <td> 和 <tr> 标签答案

【问题标题】：Meteor 1.3 and bootstrap disregarding <td> and <tr> tags inside #eachMeteor 1.3 和引导程序忽略 #each 中的 <td> 和 <tr> 标签
【发布时间】：2017-01-26 01:16:33
【问题描述】：

我正在使用 Meteor（当前在 v1.3.4 上，关于部署原因和与 mup 的兼容性）和 twbs:bootstrap。这是我在模板中的表格：

<div class = "table-responsive">
<table class="table table-hover table-condensed">
<thead>
<tr> 
    <th>Resource</th>
    <th>In Stock</th>
    {{#if stockFeatureShow 'price'}}
        <th>Price</th>
    {{/if}}
    {{#if stockFeatureShow 'group'}}
        <th>Group</th>
    {{/if}}
</tr>
</thead>
<tbody>
    {{#each resources}}
        <a class= "viewPriceGraph" value = "{{itemNo}}">
            <tr>
                <td>
                        {{item}} 
                        {{#if coolCheck yearmod.kind}}
                            - cool right now!
                        {{/if}}
                        {{#if pollutedCheck yearmod.kind}}
                            - polluted right now :(
                        {{/if}}

                </td>
                <td>{{amount}}</td>
                {{#if stockFeatureShow 'price'}}
                    <td>{{price}}</td>
                {{/if}}
                {{#if stockFeatureShow 'group'}}
                    <td>{{groupName}}</td>
                {{/if}}
            </tr>
        </a>
    {{/each}}
</tbody>
</table>
</div>

我知道这在几个月前就可以正常工作了，而且我认为从那以后我没有进行任何更改（也许将流星版本从 1.3 或类似的版本移到了前面？），但是突然之间，流星渲染似乎忽略我在 {{#each}} 段内的所有 <tr> 和 <td> 标签。

screenshot of table from running app, where all data from the each function has been stuffed into the first, one cell of the table

我不知道从哪里开始。有什么建议吗？

[编辑：我刚刚回忆起我对我的大多数集合添加了 ensureindex 查询，针对不同的字段交叉对，即字段 A 和 B，以及集合 1 的字段 A、B 和 C，等等.我无法理解这是如何导致这个中断的，我从流星 mongo 进行了一堆数据库查询检查，返回的查询看起来仍然正确。]

[编辑 2：我之前真的应该做这个检查，但我现在查看了渲染的 HTML，它确实有 <td> 和 <tr> 标记。 Safari 设法将不同的 <tr>-s 分成几行，而不是 <td>-s。

Screenshot of how the different pieces of data have separate <td>-s but they're all scrunched up together.

这让我假设问题出在 twbs:bootstrap 包上，但我不知道如何破译在哪里。控制台不会在任何地方告诉我任何错误。]

[编辑 3：这不是整个引导程序包的问题，因为其他表被渲染得很好。似乎锚标记内的所有内容都会导致表格内容中断。这对我来说很神秘，因为以前没有发生过这种情况，但我想这是一个更容易解决的问题。]

【问题讨论】：

尝试将<td>标签移到{{#if ...}}语句之外
@ChrisSatchell 理想情况下，如果我没有在某些页面上显示这些功能，我不希望这些列/单元格存在或占用空间，这就是我将 <td> 标签放在里面的原因#if 语句。我也试过了，还是不行。
你能不能显示一个 HTML sn-p 来显示那张损坏的桌子？看看实际的 DOM 是什么样子的
是的，看起来您返回的数据中可能存在导致 DOM 中断的内容。一个 HTML sn-p 对调试这个很有用。
@ChrisSatchell 添加了另一个带有新发现的屏幕截图，该 html 具有单元格和行标签，但它们的间距不正确。我认为这是引导程序的错。我能做什么？

标签： html twitter-bootstrap meteor

【解决方案1】：

显然，将表格的一行或多个单元格包裹在锚标记内（有时）会破坏单元格分隔，并且 bootstrap/html 将它们全部串在一起。理想情况下，只有单元格的内容应该是锚链接的。

我使用this thread 修复了我的代码，该表现在可以工作了。感谢您的帮助！

【讨论】：