Question

鉴于淘汰赛的约束声明

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

这会生成多个div元素 - 每个元素都包含自己的标记和表格。当我点击超链接时，其相应表格的可见性必须切换。我无法从服务器处理测试的内容。我怎么能得到这个效果？提前谢谢。

Answer 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的值。如果您希望每次都使用if绑定而不是可见绑定时阻止将所有内容加载到DOM中。

单击时在切换foreach绑定内切换可见性

1 个答案: