不要更新所有选择框-淘汰赛JS

Question

Consider the following:

self.selected = ko.observable();
self.selectionItems = ko.observableArray([{name: "bob"}, {name: "sally"}]);
self.containers = ko.observableArray([{name: "container 1", key:1}, {name: "container 2", key: 2}]);

If I have the following html:

<div data-bind="foreach: containers">
  <div>
    <select data-bind="options: $parent.selectionItems, optionsText: 'name', optionsValue: 'name', value: $parent.selected"></select>
  </div>
</div>

Then when one of the containers has an item selected all the containers update to reflect the fact that in container x you selected a name of bob.

How do I make actions like observables specific to that container element?

essentially, if I have 20 containers via the self.containers each container should observe it own actions. Would I make self.selected into an observableArray ?

Answer 1

If you bind the value of every select to the same observable, they're all going to have the same value. You would need to have an observable in the containers object to store the selected.

self.containers = ko.observableArray([{
  name: "container 1",
  key: 1,
  selected: ko.observable()
}, {
  name: "container 2",
  key: 2,
  selected: ko.observable()
}]);

Alternatively, you could have an observableArray of selecteds in the parent, but that would require you to coordinate the size of your array to be the same length as containers and you'd have to use $index to get the right one; it's a clunkier option.