Question

我有以下基本结构。我需要能够单独切换每个表的可见性。类似乎不起作用，因为它将使用相同的类切换所有类。有一个未知数量的项目，因此有一个未知数量的外部div，我不知道id，因为它不是唯一的。

<div data-bind="foreach: items">
    // Other pieces of data here...

    <button data-bind="click: myToggleFunction">Hide/Show</button> // This could be image, link or whatever to trigger toggle
    <table>  // Need to toggle tables individually
        //Rows and columns here bound to the elements of each "item"
    </table>
</div>

只是不确定如何确定它正在尝试切换哪个表。

Answer 1

See a Demo

我喜欢为Knockout项目提供toggle函数。这是一个。

ko.observable.fn.toggle = function () {
    var obs = this;
    return function () {
        obs(!obs())
    };
};

然后我们可以创建具有visible属性的对象。在这些对象中定义所有表数据。

function Item() {
    var self = this;

    self.visible = ko.observable(true);
}

我们的ViewModel包含这些项目的数组。如果你需要它，那就是小提琴。

当我们访问HTML时，我们可以在点击处理程序中设置visible.toggle()，这会切换我们的visible可观察对象。当table的{{1}}属性为真时，我们的Item也必定可见。

visible

Answer 2

我能想到的最简单的方法是在viewmodel中拥有可见性标志。在视图中，在div上使用knockoutjs“if”绑定。（当然，您需要在div之外设置切换链接）。

像

这样的东西

 <div data-bind="if: div1Visibility">
     Show this stuff if div1Visibility is true, otherwise don't.
 </div>
 <div data-bind="if: div2Visibility">
     Show this stuff if div2Visibility is true, otherwise don't.
 </div>

您还可以执行以下操作：

<!-- ko if: div1Visibility -->
    Show div1 stuff.
<!-- /ko -->
<!--  ko if: div2Visibility  -->
    Show div2 stuff.
<!--  /ko -->

Knockout：在foreach div中切换表可见性

2 个答案:

See a Demo