ノックアウト複数のボタンが対応するdivを展開する

Question

foreachループで作成された対応するボタンに基づいてdivセクションを表示および非表示にしようとしています。現時点では、ボタンをクリックするたびにボタンが表示されているのではなく、すべてのdivセクションが表示されます。私はノックアウトにはかなり新しいので、この問題を解決するにはまだ別の方法やチュートリアルを試してみましたが、まだ失敗しています。

これは、ビューのセクションです：ビューモデルではそのすべてやっtrueにviewPricesを設定している

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

：

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

すべてを表示するのではなく、接続されているボタンをクリックした後に対応するsevenDivRoomを表示させたいだけです。拡大する前に

：

を展開した後 - というだけ秒よりもすべての3つの拡張：私はラファエルCompanhoniの例を使用してみましたし、それを適用している

EDIT

を私のバージョンですが、私はdivを表示するいくつかの困難に遭遇しています。私は、ビューモデルに

self.ShowRoomPrice = ko.observable(false);

を追加しました。その後、 availability.ShowRoomPrice = falseを追加しました。可観測配列を作成したのと同様の可用性コールバックに を追加します。さらに、私はそれが真と偽の間ShowRoomPriceの状態が、div要素を変更し、この

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

のように最後のビューが見えます

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

を追加しました表示されません。まだ欠けているものはありますか？

Answer 1

ルートビューモデルにあるプロパティ 'viewPrices'を使用して、divをレンダリングするかどうかを決定しています。以下の例では、observableArrayがFilteredAvailabiltyというオブジェクトを持つ単純なビューモデルを追加しました。あればKO -

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>