javascript - knockout 多个按钮扩展其相应的div

Question

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

这是 View 部分:

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

在 View 模型中，它所做的就是将 viewPrices 设置为 true:

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

我只想在单击附加的按钮后显示相应的 SevenDivRoom，而不是显示全部。

展开之前:

展开后 - 展开所有三个而不是仅第二个:

编辑

我尝试使用 Rafael Companhoni 示例并将其应用到我的版本中，但我在显示 div 时遇到了一些困难。我已经添加了

self.ShowRoomPrice = ko.observable(false); 

到 View 模型。然后添加 可用性.ShowRoomPrice = false;到可用性回调，这与创建可观察数组的方式类似。此外我还添加了

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

最后 View 看起来像这样

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

它确实会在 true 和 false 之间更改 ShowRoomPrice 的状态，但 div 不会出现。还缺少什么吗？

Answer 1

您正在使用 Root View 模型中的属性“viewPrices”来决定是否应渲染 div。在下面的示例中，我添加了一个简单的 View 模型，其中包含 FilteredAvailabilty 对象的 observableArray。它演示了如何在“if”绑定(bind)中使用每个 subview 模型“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>