Mvvm 从在knockout js中使用foreach绑定创建的元素组中永久设置特定元素的类

我刚开始使用击倒js。我正在使用knockout js的foreach绑定创建一组图像。最初，所有图像都有相同的css类“ImageUnvisted”，我试图更改并设置我单击以显示已访问状态的特定图像的类（永久）。我成功地更改了单击时的类事件，但只要我单击另一个图像，先前单击的图像的新添加的类就会被删除。我是新的，所以请原谅我，如果你发现任何错误，请帮助。 以下是我正在使用的代码：

var-vm={
item:jsonData.items，
单击图像索引：可观察（“”）
}
ko.应用绑定（vm）；
函数getVisitedClass（数据、索引）{
如果（index（）==vm.clickedImageIndex（））{
返回“imageVisited”
}
}
函数imageClicked（数据，e）{
var itemTarget=e.target | | e.src元素；
index=ko.contextFor（itemTarget）。$index（）；
vm.点击edimageindex（索引）；
}

.imageUnvisited{
边框：实心1px绿色；
}
.参观{
边框：实心1px黑色；
}

---

当前代码不起作用的原因：

您正在

clickedImageIndex

中存储一个索引，每次单击都会更新该索引。因此，表达式

index（）==vm.clickedImageIndex（）

一次只能对一个图像为真

一个“快速修复”：

您可以在一个对象中存储多个索引，而不是将索引存储在

clickedImageIndex

中

在您的

虚拟机中

：

clickedImageIndex: ko.observable({})

在处理程序中：

var clicked = vm.clickedImageIndex();
clicked[index] = true;

vm.clickedImageIndex(clicked);

在您的

getvisited类中

：

if (vm.clickedImageIndex()[index()]) {
  return "imageVisited"
}

更好的解决方案：

遵循更严格的淘汰MVVM体系结构可能是个好主意。。。这意味着：

• 将图像映射到

  ImageViewModel

  实例
• 将单击的

  可观察属性添加到
  ImageViewModel

• 添加一个

  ImageViewModel.prototype.onClick设置
  this.clicked（true）

• 使用

  data bind=“click:onClick，css:{'imagevisted'：clicked}”

  数据绑定更新状态