敲除多个按钮，展开相应的 div

Question

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

这是视图部分：

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

我只希望在单击附加到它的按钮后显示相应的 seventhDivRoom，而不是全部显示。

展开前：

扩展后 - 扩展了所有三个而不是仅扩展了第二个：

编辑

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

self.ShowRoomPrice = ko.observable(false);

到视图模型。然后添加 availability.ShowRoomPrice = 假；可用性回调类似于您创建可观察数组的方式。此外，我添加了

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

它确实在 true 和 false 之间改变了 ShowRoomPrice 的状态，但是 div 没有出现。是否还有什么遗漏？

Answer 1

您正在使用根视图模型中的属性 'viewPrices' 来决定是否应呈现 div。在下面的示例中，我添加了一个简单的视图模型，其中包含 FilteredAvailabilty 对象的 observableArray。它演示了如何在 'if' 绑定中使用每个 sub-view 模型 '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>

敲除多个按钮，展开相应的 div

Knockout multiple buttons expanding their corresponding div

javascript

html

knockout.js

durandal