Нокаут несколько кнопок, расширяющих соответствующий div

Question

Я пытаюсь показать и скрыть раздел div на основе соответствующих кнопок, которые создаются через цикл foreach. На данный момент, всякий раз, когда я нажимаю кнопку, он показывает все секции div, а не ту, на которой находится кнопка. Я новичок в нокауте, и я потратил много часов на то, чтобы попробовать разные методы и учебные пособия, чтобы решить эту проблему, но все же безуспешно.

Это раздел вида:

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div class="firstDiv"> 
 
\t <!-- ko if: $root.filteredAvailabilities().length > 0 --> 
 
\t <!-- ko foreach: $root.filteredAvailabilities --> 
 
\t <div class="secondDiv"> 
 

 
\t \t <div class="thirdDiv"> 
 

 
\t \t \t <div class="fourthDiv"> 
 
\t \t \t \t <div class="fifthDiv"> 
 
\t \t \t \t \t <!-- ko with: Items --> 
 

 
\t \t \t \t \t <div class="sixthDiv"> 
 
\t \t \t \t \t \t <!-- ko if: !$root.viewPrices() --> 
 
\t \t \t \t \t \t <input class="actionButton" type="button" data-bind="upperCaseValue: $parents[1].ViewPrices, click: $root.ViewPrices" /> 
 
\t \t \t \t \t \t <!-- /ko --> 
 
\t \t \t \t \t \t <!-- ko if: $root.viewPrices() --> 
 
\t \t \t \t \t \t <input class="actionButton" type="button" data-bind="upperCaseValue: $parents[1].HidePrices, click: $root.HidePrices" /> 
 
\t \t \t \t \t \t <!-- /ko --> 
 
\t \t \t \t \t </div> 
 

 
\t \t \t \t \t <!-- /ko --> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <!-- ko if: $root.viewPrices() --> 
 
\t \t \t \t <!-- ko foreach: Rooms --> 
 
\t \t \t \t <div class="seventhRoomDiv"> 
 
\t \t \t \t \t <table class="roomPriceTable"> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td><span class="roomPriceTableRoomLabel" data-bind="text: Room.Name"></span></td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t </table> 
 
\t \t \t \t </div> 
 
\t \t \t \t <!-- /ko --> 
 
\t \t \t \t <!-- /ko --> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <!-- ko if: $root.viewPrices() --> 
 
\t \t <div class="eighthBottomDiv"> 
 
\t \t \t <input class="actionButton chooseRoomButton" type="button" data-bind="upperCaseValue: $parent.ChooseRoom, click: $root.ChooseRoom" /> 
 
\t \t </div> 
 
\t \t <!-- /ko --> 
 

 
\t </div> 
 
\t <!-- /ko --> 
 
\t <!-- /ko --> 
 
</div>

В модели представления все его делают, заходящее viewPrices истины:

/// <summary> 
 
     /// View the prices. 
 
     /// </summary> 
 
     self.ViewPrices = function() 
 
     { 
 
      self.viewPrices(true); 
 
     };

Я просто хочу, чтобы соответствующий седьмой дисплей отображался после нажатия кнопки, прикрепленной к ней, а не отображения всех.

До расширения:

После расширения - Expanded все три, а не второй один только:

EDIT

Я попытался с помощью примера Рафаэль Companhoni и применить его к мои версии, но я сталкиваюсь с некоторыми трудностями, чтобы отобразить div. Я добавил

self.ShowRoomPrice = ko.observable(false);

к модели представления. Затем добавлено .ShowRoomPrice = false; , чтобы получить обратный вызов доступности, аналогичный тому, как вы создали наблюдаемый массив. Кроме того, я добавил

self.Test = function (availability){ 
 
     availability.ShowRoomPrice = !availability.ShowRoomPrice 
 
     model.availability(availability); 
 
    };

Наконец вид выглядит так

<!-- ko if: ShowRoomPrice === true -->     
 
<input class="actionButton" type="button" data-bind="upperCaseValue: 'Show/Hide Prices', click: $root.ChooseHotel" />  
 
<!-- /ko -->

Это делает изменения состояния ShowRoomPrice между истинным и ложным, но в DIV не появляется. Есть что-то, что все еще отсутствует?

Answer 1

Вы используете свойство 'viewPrices', которое находится в модели корневого представления, чтобы решить, нужно ли отображать div. В приведенном ниже примере я добавил простую модель вида с наблюдаемым массивом FilteredAvailabilty объектов.Он показывает, как можно использовать каждый суб-вид модели свойство «viewPrices» в «если» связывания:

var FilteredAvailability = function (viewPrices, items, rooms) { 
    var self = this; 
    self.viewPrices = ko.observable(viewPrices); 
    self.Items = ko.observableArray(items); 
    self.Rooms = ko.observableArray(rooms); 
} 

var ViewModel = function() { 
    var self = this; 

    // initialize with some data 
    self.filteredAvailabilities = ko.observableArray([ 
     new FilteredAvailability(true, items, rooms), 
     new FilteredAvailability(true, items, rooms), 
     new FilteredAvailability(false, items, rooms), 
    ]); 
}; 

, а затем в HTML

<div> 
    <!-- ko if: filteredAvailabilities().length > 0 --> 
    <!-- ko foreach: filteredAvailabilities --> 
    <div> 
     <!-- ko if: viewPrices --> 
      <div>Depends only on each the property 'viewPrices' of each item</div> 
     <!-- /ko --> 
    </div> 
    <!-- /ko --> 
    <!-- /ko --> 
</div>