knockout.js 创建具有折叠(父/子)行的tbody

jum4pzuy  于 2022-11-29  发布在  其他
关注(0)|答案(2)|浏览(79)

我有一个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以显示/隐藏子行(项目)。

6fe3ivhb

6fe3ivhb1#

正如super cool所指出的,最好的解决方案是使用一些UI效果,让你以更时尚的方式展开,然而,简单的解决方案是维护一个布尔值,指示modelyear是否展开:

<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只是在modelyear对象的isExpanded属性上切换true/false(必须是ko.observable)。这样,只要该属性为true/false,knockout就会在DOM中添加/删除元素。您也可以使用visible代替if。区别在于visible只呈现一次,然后在display/display:none之间切换,而if会重新呈现。注意:检查语法,因为我还没有测试这段代码。

wixjitnu

wixjitnu2#

我自己用引导程序的“崩溃”功能解决了这个问题。
“data-target”是一个到knockout计算值的绑定,它是从当前父对象的ITEM ID中获得的。
下面是HTML代码(我使用DIV表示父子关系,并使用一个hyperlink属性切换查尔兹):

<!-- 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 -->undefined</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);

相关问题