Knockout mehrere Schaltflächen erweitern ihre entsprechenden div

Question

Ich versuche, einen div-Abschnitt basierend auf den entsprechenden Schaltflächen, die durch foreach-Schleife erstellt werden, zu zeigen und auszublenden. Im Moment, wenn ich auf die Schaltfläche klicke, werden alle div-Abschnitte angezeigt und nicht die, unter der sich die Schaltfläche befindet. Ich bin ziemlich neu im Knockout und habe viele Stunden damit verbracht, verschiedene Methoden und Tutorials auszuprobieren, um dieses Problem zu lösen, aber immer noch nicht erfolgreich.

Dies ist die Ansicht Abschnitt:

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

Nach Ansicht Modell all seine Tun viewPrices true setzen:

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

Ich möchte nur, dass der entsprechende seventDivRoom angezeigt wird, nachdem ich auf die angefügte Schaltfläche geklickt habe, anstatt alle anzuzeigen.

Vor erweitert:

Nach der Erweiterung - Expanded alle drei statt der zweite nur:

EDIT

ich versucht habe, Rafael Companhoni Beispiel mit und es auf meine Versionen, aber ich stoße auf einige Schwierigkeiten, um das div anzuzeigen. Ich habe

self.ShowRoomPrice = ko.observable(false);

hinzugefügt

der Ansicht Modell. Dann hinzugefügt availability.ShowRoomPrice = false; zum Verfügbarkeits-Callback, der ähnlich ist, wie Sie das beobachtbare Array erstellt haben. Ich habe Weiterhin

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

Schließlich wird die Ansicht wie folgt aussieht

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

Es ändert den Zustand des ShowRoomPrice zwischen wahr und falsch, aber die div hinzugefügt erscheint nicht. Gibt es etwas, das noch fehlt?

Answer 1

Sie sind Eigentum ‚viewPrices‘ verwendet, die im Root-View-Modell ist zu entscheiden, ob die divs gemacht werden sollen. Im folgenden Beispiel habe ich ein einfaches View-Modell mit einem ObservableArray von FilteredAvailability Objekten hinzugefügt.Es zeigt, wie Sie Eigenschaft jedes Unter View-Modell 'viewPrices' verwenden könnte in der 'if' Bindung:

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), 
    ]); 
}; 

Und dann in der 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>