修改 observableArray 中 n 个项目的特定可观察属性？

Question

我正在做一个界面，当您单击它时，observableArray 中的一个对象可以是selected。数组中任何当前的selected 对象（应该只有一个）都应该改变他们的（它的）selected observable。

我是否需要在点击时遍历整个数组，将所有selecteds 设置为false，然后再将点击的元素的selected 设置为true，像这样？

self.selectAnnotation = function() {
  var array = //annotations array from AnnotationsViewModel
  // (actually, I'm not so sure of the syntax of this either)

  for (var i = 0; i < array.length(); i++) {
    var item = array[i];
    item.selected(0);
  }
  self.selected(1);
}

使用如下所示的绑定：

<div id="clickArea" data-bind="foreach: annotations">   
    <span data-bind="click: selectAnnotation, css: selected: selected" class="annotation"></span>
</div>

Answer 1

您应该将所选项目存储在父上下文中，而不是存储在每个项目中。

var ViemModel = function(){
    var self = this;
    self.annotations= [...];
    self.selected = ko.observable();
    self.selectAnnotation = function(annotation) {
        self.selected(annotation);
    };
};

<div id="clickArea" data-bind="foreach: annotations">   
    <span data-bind="click: $parent.selectAnnotation, css: { 'selected': $parent.selected() == $data}" class="annotation"></span>
</div>

希望对你有帮助。