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) 

我敢肯定，這清楚爲什麼這是行不通的。