将特定元素的类设置从使用敲除JS中的foreach绑定创建的元素组永久设置

Question

我刚开始使用敲除JS。我正在使用基因敲除JS的绑定来创建一组图像。最初，所有图像都具有相同的CSS类" ImageUnvisited"，我正在尝试更改并设置我单击的特定图像的类，以显示访问的状态。我成功地更改了"单击事件"上的课程，但是一旦单击另一个图像，新的添加类的先前单击映像的类别将删除。我是新来的，它提出了，如果您发现任何错误，请原谅我，请提供帮助。以下是我使用的代码：

var vm = {
  item: jsonData.items,
  clickedImageIndex: ko.observable('')
}
ko.applyBindings(vm);
function getVisitedClass(data, index) {
  if (index() == vm.clickedImageIndex()) {
    return "imageVisited"
  }
}
function imageClicked(data, e) {
  var itemTarget = e.target || e.srcElement;
  index = ko.contextFor(itemTarget).$index();
  vm.clickedImageIndex(index);
}

.imageUnvisited {
  border: solid 1px green;
}
.imageVisited {
  border: solid 1px black;
}

<div data-bind="foreach: item" id="image_gallery">
  <div id="image_wrapper">
    <image data-bind="attr: { id: 'image' + $index(), src: $data.Src, class: getVisitedClass($data, $index)},click: imageClicked" class="imageUnvisited" role="button"></image>
  </div>
</div>

Answer 1

为什么您的当前代码不起作用：

您在clickedImageIndex中存储一个索引，每次点击时都会更新。因此，表达式index() == vm.clickedImageIndex()只能对一个一个图像是正确的。

a"快速修复"：

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

在您的vm中：

clickedImageIndex: ko.observable({})

在您的处理程序中：

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

在您的getVisitedClass中：

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

一个更好的修复：

遵循敲除MVVM架构可能是一个好主意...这意味着：

• 将图像映射到ImageViewModel实例
• 将clicked可观察属性添加到ImageViewModel
• 添加一个ImageViewModel.prototype.onClick方法，该方法设置this.clicked(true)
• 使用data-bind="click: onClick, css: { 'imageVisited': clicked }"数据限制来更新状态。