挖掘出多個按鈕，擴展其對應的div

Question

我試圖根據通過foreach循環創建的相應按鈕來顯示和隱藏div部分。目前，無論何時點擊按鈕，它都會顯示所有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爲true：

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

我只需要在單擊附加到它的按鈕而不是顯示全部按鈕後顯示相應的第七個DivivRoom。

擴大之前：

擴大後 - 擴大所有三個，而不是隻有第二個：

我一直在使用拉斐爾Companhoni例子，它適用於試圖

編輯我的版本，但我遇到了一些困難，以顯示div。我已經加入

self.ShowRoomPrice = ko.observable(false);

向視圖模型。然後添加 availability.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 -->

它確實改變真假，但在div之間ShowRoomPrice狀態沒有出現。有什麼東西仍然缺失嗎？

Answer 1

您正在使用位於根視圖模型中的屬性'viewPrices'來決定是否應該呈現div。在下面的示例中，我添加了一個帶有observableArray的簡單視圖模型，其中包含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>