Question

我有一个koforeach绑定，它根据通过JSON填充的可观察数组显示一系列项目。我希望能够在点击它时更改项目div的类。我们的想法是使用此项目列表作为选择器：用户通过单击选择其中一个项目。

foreach如下：

<!-- ko foreach: myItems -->
    <div class="unselectedItem" data-bind="click: $parent.selectItem"><span data-bind="text: itemName"></span></div>
<!-- /ko -->

ViewModel中对selectItem函数的调用工作正常但我没有成功正确更改所单击项的类。

我可以在div上添加onCLick事件，当我第一次单击其中一个div时更改类，但是当我想选择另一个div时，我无法删除第一个单击div的类。

Answer 1

有许多不同的方法可以解决这个问题。

这是一个快速而又肮脏的人：

将ko.observable添加到ViewModel以存储所选项目
在selectItem函数中，使用新选择
为您的商品添加css绑定，如下所示：css: { 'selected' : $data === $parent.selectedItem() }

Knockout为您创建一个新的observable，因为css语句包含一个observable。每次更新selectedItem时，所有css绑定都将更新。

在此处查看示例：https://jsfiddle.net/snm8b9mr/

修改：仅仅因为我用许多不同的方式开始我的答案，这里有一个替代解决方案，我个人更好：https://jsfiddle.net/a45serz6/1/

它会为您的所有项目添加select方法和selected观察。确保一次只能一次选择的逻辑在其他地方进行管理。通过使用这种方法，您的数据绑定将更容易读写：

<li data-bind="css: {'selected': selected}, text: data, click: select"></li>

在knockout.js中讲述如何将特定类应用于onClick上的项目

1 个答案: