淘汰多个按钮扩展其相应的 div

Question

我正在尝试根据通过 foreach 循环创建的相应按钮来显示和隐藏 div 部分。目前，每当我单击按钮时，它都会显示所有 div 部分，而不是按钮所在的部分。我对淘汰赛很陌生，我花了很多时间尝试不同的方法和教程来解决这个问题，但仍然没有成功。

这是视图部分：

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

		<div class="thirdDiv">

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

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

					<!-- /ko -->
				</div>

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

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

	</div>
	<!-- /ko -->
	<!-- /ko -->
</div>

在视图模型中，它所做的只是将 viewPrices 设置为 true：

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

我只想在单击附加到它的按钮后显示相应的第七个DivRoom，而不是显示全部。

展开前：

展开后 - 展开全部三个而不是仅展开第二个：

编辑

我尝试使用 Rafael 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 对象的 observableArray 的简单视图模型。它演示了如何在 'if' 绑定中使用每个子视图模型的 '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>