javascript - 对表中的多行使用单个可观察对象

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，单击时我会看到每一行的弹出窗口。

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

toggleClick - 是自定义指令，它将 bool 值更改为相反

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

Answer 1

是的，这是可能的。

click 绑定(bind)向事件处理程序发送两个参数:

1. 点击的$data,
2. 点击事件。

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

知道通过使用参数调用它来设置一个可观察对象，您可以想象会发生什么。请注意，knockout 会忽略第二个参数。

因此，解决方案是将 openEditPopup 从包含 bool 更改为包含 displayItem，并更改 visible 绑定(bind)到:

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

一个例子:

var vm = {

  selected: ko.observable("A"),
  items: ["A", "B", "C", "D"]
  
};

ko.applyBindings(vm);

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