在knockout.js foreach中，如何将特定类应用于onClick上的项

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

详情如下：

<!-- 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的类。

有许多不同的方法可以解决此问题

这里有一个又快又脏的：

将

ko.observable

添加到ViewModel以存储所选项目

在

selectItem

功能中，使用新选择更新可观察项

将

css

绑定添加到您的项目，如：

css:{'selected'：$data===$parent.selectedItem（）}

Knockout为您创建一个新的可观察对象，因为css语句包含一个可观察对象。每次更新

selectedItem

时，所有css绑定都将更新

请在此查看一个示例：

编辑：正因为我以多种不同的方式开始回答，这里有一个我个人更喜欢的替代解决方案：

它添加了一个

select

方法和

selected

可观察到的所有项目。确保一次只有一个选择的逻辑在其他地方进行管理。通过使用此方法，您的数据绑定将更易于读取和写入：

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

有许多不同的方法可以解决此问题

这里有一个又快又脏的：

将

ko.observable

添加到ViewModel以存储所选项目

在

selectItem

功能中，使用新选择更新可观察项

将

css

绑定添加到您的项目，如：

css:{'selected'：$data===$parent.selectedItem（）}

Knockout为您创建一个新的可观察对象，因为css语句包含一个可观察对象。每次更新

selectedItem

时，所有css绑定都将更新

请在此查看一个示例：

编辑：正因为我以多种不同的方式开始回答，这里有一个我个人更喜欢的替代解决方案：

它添加了一个

select

方法和

selected

可观察到的所有项目。确保一次只有一个选择的逻辑在其他地方进行管理。通过使用此方法，您的数据绑定将更易于读取和写入：

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