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([]);

Answer 2

那是因为您拥有一个全局expanded可观察对象，而不是使用自己的expanded标记扩展每个项目。

尝试使用matches标记扩展_expanded数组中的每个项目：

for (var i in vm.matches)
    vm.matches[i]._expanded = ko.observable(false);

视图模型中的toggle方法：

toggle: function(item) {
    item._expanded(!item._expanded());
}

您的HTML将是：

<div data-bind="foreach: matches">
    <div data-bind="click: $root.toggle, text: title"></div>
    <div data-bind="visible: _expanded(), text: details"></div>
</div>

请参阅Fiddle

Answer 3

以下是您的观看方式。

sc.concat.js

此视图结构指示视图模型结构

<div data-bind="foreach: matches">
   <div class="details">                              <!-- container -->
      <h1 data-bind="click: toggleExpanded">Test</h1> <!-- sth to click on -->
      <div data-bind="visible: expanded">...</div>    <!-- sth to show/hide -->
   </div>
</div>

但你有

root
  matches (observable array)
    match (object)
      expanded (observable value)
      toggleExpanded (method)
    match (object)
      expanded (observable value)
      toggleExpanded (method)
    match (object)
      expanded (observable value)
      toggleExpanded (method)

我确定清楚为什么这不起作用。

在Knockout JS中切换

3 个答案: