javascript - 在 Knockout JS 中切换

Question

在我的应用程序中，我有一个项目列表。当我单击某个特定项目时，我希望为该特定项目显示一些具有切换效果的更多信息。到目前为止，我已经能够进行切换，但问题是当我切换时，我获得了所有列表项的信息，而不仅仅是我单击的那个。

<div id="order-info-container" class="medium-12 columns" data-bind="foreach: matches, click:$root.test">
   <div class="details" data-bind="visible: $root.expanded">
      <label>Test</label>
   </div>
</div>

self.expanded = ko.observable(false);

self.test = function () {
   self.expanded(!self.expanded());
}

有人能指出我正确的方向吗？

Answer 1

这是一个逻辑问题。

您正在重复“匹配”次数的结构。对于每个项目，您都试图根据单个根级变量 expanded 显示/隐藏。由于您只有一个变量来控制 for 循环内所有元素的可见性，因此它会立即切换所有信息。

您需要在循环中为每个项目设置一个属性以维持展开/折叠状态，或者您可以将 expanded 对象更改为 self.expanded = ko.observableArray([]) ;