具有动态值的可折叠数据行答案

【问题标题】：Collapsible data row with dynamic values具有动态值的可折叠数据行
【发布时间】：2017-11-02 12:13:03
【问题描述】：

上下文：表格中有一组月份（例如 May、Jun、July），在这些月份下将是给定月份的所有读数。

代码：

<tbody data-bind="visible: !MeterReadingHistory_IsBusy(), foreach: HeaderLines()" style="display: none">
                        <tr data-toggle="collapse" data-target=".order1">
                            <td>
                                <!-- ko if: meterReadings.length > 0-->
                                <span class="glyphicon glyphicon-chevron-down"></span>
                                <span class="reading-history-data" data-bind="html: monthName"></span>
                                <!-- /ko -->
                                <!-- ko if: meterReadings.length == 0-->
                                <span class="reading-history-data" data-bind="html: monthName"></span>
                                <!-- /ko -->
                            </td>
                            <td>
                                <span class="reading-history-data" data-bind="html: latestReadingDate"></span>
                            </td>
                            <td>
                                <span class="reading-history-data" data-bind="html: latestReadingType"></span>
                            </td>
                            <td>
                                <span class="reading-history-data" data-bind="html: latestReadingElectric"></span>
                            </td>
                            <td>
                                <span class="reading-history-data" data-bind="html: latestReadingGas"></span>
                            </td>
                        </tr>


                        <!-- ko if: meterReadings.length > 0 -->
                        <tr class="collapse order1" >
                            <td colspan="5">

                                <table class="table mb-none desktop-only">
                                    <thead>
                                        <tr>
                                            <th>Day</th>
                                            <th>Reading Source</th>
                                            <th>Electricity</th>
                                            <th>Gas</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- ko foreach: meterReadings -->
                                        <tr>
                                            <td data-bind="text: readingDateParsed"></td>
                                            <td data-bind="html: readingType"></td>
                                            <!-- ko foreach: readings -->
                                            <td data-bind="html: reading"></td>
                                            <!-- /ko -->
                                            <!-- ko if: readings.length == 0 -->
                                            <td></td>
                                            <td></td>
                                            <!-- /ko -->
                                            <!-- ko if: readings.length == 1 -->
                                            <td></td>
                                            <!-- /ko -->
                                        </tr>
                                        <!-- /ko -->
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <!-- /ko -->
                    </tbody>

问题：当我单击任何行时，它会扩展每个月的行以显示所有数据，而实际上我只想显示已单击的实际月份的子行。

主要问题是这个表是动态的，我们不知道会产生多少标题行，因此很难通过 data-bind 属性将每一行分配给特定的数据源。

那么......我怎样才能让这段代码只显示我点击的数据行，例如5 月，并在所有其他标题行保持关闭时显示该给定月份的所有读数？

谢谢！

【问题讨论】：

您可以使用$index() 在循环中创建“唯一”目标。（foreach 渲染的每个元素都有自己的索引。）但是：knockout 并不真正喜欢修改 DOM 的其他代码（例如您的引导框架）。尝试在谷歌上搜索“自定义引导绑定”以确保一切正常。

标签： javascript html twitter-bootstrap knockout.js

【解决方案1】：

$([data-toggle="collapse"]).on('click',function(){
    var thisCollapse = $(this).attr('data-target');
    $(thisCollapse).slideToggle('slow');
})

【讨论】：

似乎什么也没做 :(
虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。