Toggle in 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观察到的，而不是延伸的每个项目拥有自己的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 2

这是一个逻辑问题。

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

你需要有每个项目的一个属性的循环，以维持展开/折叠状态，也可以将expanded对象更改为self.expanded = ko.observableArray([]);

Answer 3

以下是您的观点应该如何的样子。

<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) 

但是你必须

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

我敢肯定，这清楚为什么这是行不通的。