单击时切换淘汰赛 foreach 绑定内的可见性答案

【问题标题】：Toggle visibility inside knockout foreach binding when clicked单击时切换淘汰赛 foreach 绑定内的可见性
【发布时间】：2014-11-05 13:05:02
【问题描述】：

给定一个淘汰赛的 foreach 绑定语句

 <div data-bind="foreach: Tests">
      <a><span data-bind="text: testName"></span></a>
      <table>
      <!--table contents -->
      </table>
 </div>

这会生成多个 div 元素 - 每个元素都包含自己的标签和表格。当我单击超链接时，其对应表的可见性必须切换。我无法将测试的内容作为来自服务器的内容进行操作。我怎样才能得到这个效果？提前致谢。

【问题讨论】：

是测试 observableArray 吗？
是的！它是一个可观察的数组。

标签： jquery knockout.js toggle

【解决方案1】：

由于 Tests 是一个 observableArray，因此只需在您的视图模型中对其进行迭代并添加一个属性来切换可见性 -

 <div data-bind="foreach: Tests">
      <a><span data-bind="text: testName, click: toggleIsExpanded"></span></a>
      <table data-bind="visible: isExpanded">
      </table>
 </div>

在您的 ViewModel 中 -

function viewModel() {
    self.Tests = ko.observableArray(yourData);
    ko.utils.arrayForEach(self.Tests(), function (test) {
        if (!test.isExpanded) {
            test.isExpanded = ko.observable();
        }
    }
    self.toggleIsExpanded = function (sender) {
        sender.isExpanded(!self.isExpanded());
    }
}

现在，当您单击链接名称时，它将切换 isExpanded 属性，这将使表格根据 isExpanded 的值可见。如果您想防止每次都将所有内容加载到 DOM 中，您还可以使用 if 绑定而不是可见绑定。

【讨论】：