Question

<div class="tbody" data-bind="foreach: displayItems">
    <div class="t-row">
        <div class="t-cell">
            <div class="manage-location-buttons">
                <a href="javascript:void(0)">
                    <i class="fa fa-pencil" aria-hidden="true" data-bind="toggleClick: $component.openEditPopup"></i> Edit
                </a>
                <div class="edit-table-popup" data-bind="visible: $component.openEditPopup">
                    <ul>
                        <li><a data-hash="#locationmanagement/managelocations/locationediting" data-bind="click: goToTab">Locations</a></li>
                        <li><a data-hash="#locationmanagement/managelocations/events" data-bind="click: goToTab">Events</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的自定义表样本。

在链接上点击我会像弹出一样显示edit-table-popup div。因为我对所有项目只使用了一个可观察的openEditPopup，onclick我看到每行的弹出窗口。

 openEditPopup = ko.observable<boolean>(false);

toggleClick - 是自定义dirrective，它将布尔值更改为相反的

是否可以只使用一个observable，但仅为点击的行显示弹出窗口？

Answer 1

是的，这是可能的。

click绑定向事件处理程序发送两个参数：

点击了$data，
点击事件。

如果您的点击处理程序是一个可观察的，这意味着它会像这样调用observable：yourObservable(data, event)

通过用参数调用可以观察到observable是 set ，你可以想象会发生什么。请注意，knockout忽略了第二个参数。

因此，解决方案是将openEditPopup从包含bool更改为包含displayItem，并将visible绑定更改为：

visible: $component.openEditPopup() === $data

一个例子：

＆＃13;

var vm = {

  selected: ko.observable("A"),
  items: ["A", "B", "C", "D"]
  
};

ko.applyBindings(vm);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<p>Tabs</p>
<div data-bind="foreach: items">
  <span data-bind="text: $data, click: $parent.selected"></span>
</div>

<p>Content</p>
<div data-bind="foreach: items">
  <div data-bind="visible: $parent.selected() === $data">
    <h1 data-bind="text:$data"></h1>
  </div>
</div>

＆＃13;

对表中的多行使用单个observable

1 个答案: