Knockout + Bootstrap：在数据表中制作可折叠的详细信息行

Question

场景：使用 Knockout 和 Bootstrap 创建数据表的应用程序。每行数据将对应表中的两行：摘要行和详细信息行。在用户点击或轻敲摘要行之前，详细信息行将被隐藏。当用户单击或点击摘要行时，在其下方显示详细信息行。或者，如果用户单击或点击摘要行并且已显示详细信息行，则折叠详细信息行。无需为表中的每一行创建 observable 即可实现这一点。

Answer 1

使用 Bootstrap 的 collapse functionality 来实现这一点，而无需创建 observable。根据数据中的唯一标识符，为详细信息行提供id 属性。然后给摘要行一个data-toggle="collapse" 属性和一个Knockout-created data-target 属性指向详细信息行。

下面的代码显示了标记的模式。

<table class="table table-hover">
    <tbody data-bind="foreach: Enumeration">
        <tr data-toggle="collapse" data-bind="attr: { 'data-target': '#details'+ID }">
            <td>Summarize</td>
            <td>Some</td>
            <td>Info</td>
            <td>Here</td>
        </tr>
        <tr class="collapse" data-bind="attr: { id: 'details'+ID }">
            <td colspan="4"><span data-bind="text: Details"></span></td>
        </tr>
    </tbody>
</table>