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 флагом.

Try продлить каждый пункт в вашем 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> 

Этот вид структуры диктует ViewModel структурировать

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) 

Я уверен, что это понятно, почему это не может работать.