创建具有折叠（父/子）行的 tbody答案

【问题标题】：Create tbody with collapsed (parent/child) rows创建具有折叠（父/子）行的 tbody
【发布时间】：2016-03-14 11:00:36
【问题描述】：

我有一个tbody 表，其父子结构由淘汰视图模型支持。父子结构如下所示：

<tbody>
    <!-- ko foreach: modelyears -->
        <tr>
            <td >
                <span data-bind="text: modelyear_name"></span>
            </td>
            <td>
            </td>
        </tr>
        <!-- ko foreach: projects -->
            <tr>
                <td >
                </td>
                <td>
                    <span data-bind="text: project_name"></span>
                </td>
            </tr>
        <!-- /ko -->
    <!-- /ko -->
</tbody>

如何使父行可展开/可折叠？我想点击父tr 来显示/隐藏子行（项目）。

【问题讨论】：

代码看起来不错。您只需要在其中注入一些引导程序展开/折叠。
@supercool 不确定是否需要引入 Bootstrap 来实现折叠/展开，手工制作的也可以。不过，请同意基本信息：该帖子与其说是一个问题，不如说是一个待办事项。
@Jeroen 是的，手工制作就可以了#agreed。

标签： knockout.js parent-child collapse expandable

【解决方案1】：

正如 supper cool 所指出的，最好的解决方案是使用一些 UI 效果，让您以更时尚的方式进行扩展。但是，简单的解决方案是保持一个布尔值，指示模型年份是否扩展：

<tbody>
    <!-- ko foreach: modelyears -->
        <tr data-bind="click: expandClose">
            <td >
                <span data-bind="text: modelyear_name"></span>
            </td>
            <td>
            </td>
        </tr>
        <!-- ko foreach: projects -->
            <tr data-bind="if: $parent.isExpanded">
                <td >
                </td>
                <td>
                    <span data-bind="text: project_name"></span>
                </td>
            </tr>
        <!-- /ko -->
    <!-- /ko -->
</tbody>

expandClose 只是在模型年对象的 isExpanded 属性上的真/假之间切换（这必须是 ko.observable）。有了这个，只要这个属性是 true/false，knockout 就会向 DOM 添加/删除元素。您也可以使用 visible 代替 if。区别在于 visible 渲染一次，然后在 display/display:none 之间切换，而 if 重新渲染。注意：检查语法，因为我没有测试过这段代码。

【讨论】：

感谢您的回答，另一个很酷且简单 (!) 的解决方案.. :)

【解决方案2】：

我自己用引导“折叠”功能解决了这个问题。

“data-target”是对敲除计算值的绑定，我从当前父项的 ITEM ID 获得。

这是 HTML 中的代码（我使用 DIV 表示父子表示，并使用超链接属性来切换子项）：

        '<!-- ko foreach: modelyears -->
            <div>
                <table>
                    <tr>
                        <td >
                <a  href="#" data-toggle="collapse" data-bind="attr: {'id': child_id, 'data-target' : data_target }">
    <span data-bind="text: modelyear_name" ></span>
                </a>
                        </td>
                    </tr>
                </table>

            </div>

            <!-- ko foreach: projects -->
                <div data-bind="css: project_classname">
                    <table>
                        <tr>    
                            <td></td>
                            <td colspan="2">
                                <div>
        <span data-bind="text: project_name"></span>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            <!-- /ko -->
        <!-- /ko -->
    </div>'

在淘汰模型中计算的淘汰变量“child_id”、“data-target”和“project_classname”：

    // compute "project_classname"
    this.project_classname = ko.computed(function() {
       return "collapse row" + self.project_modelyear_itemid();
    }, this);

    // compute "child_id"
    this.child_id = ko.computed(function ()
    {
      return "row" + self.modelyear_itemid();
    }, this);

   // compute "data_target"
   this.data_target = ko.computed(function ()
   {
    return ".row" + self.modelyear_itemid();
   }, this);

希望它可以帮助那里的人;-)

【讨论】：