knockout.js - 修改 observableArray 中 n 个项目的特定 observable 属性？

Question

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

我是否需要在单击时遍历整个数组，selected在将单击的元素设置为 true 之前将所有 s 设置为 false selected，像这样吗？

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>

我希望它有所帮助。