Knockout observableArray 不更新选中值的所有属性

Question

我正在使用 Knockout 根据一个单独的 observableArray 的检查值填充一个 observableArray。我可以将 $data 复制到第二组，但只有一个属性通过。我想让整个对象可用。这是映射问题，还是绑定问题？

HTML:

    <form role="form" data-bind="foreach: Colors">
      <input type="checkbox" data-bind="checkedValue: name, click: $root.ToggleAssociation, checked: $root.ColorChoice">
      <label data-bind="attr: {'for' : name}, text: id() + ' ' + name()"></label>
    </form>
    <div data-bind="foreach: ColorChoice">
      <span data-bind="text: $rawData.Id, style: { 'background-color': $rawData.Name }"></span>
    </div>

JavaScript:

    function Color(data) {
      var self = this;

      self.id = ko.observable(data.id);
      self.name = ko.observable(data.name);
      self.selected = ko.observable(false);
    }

    function viewModel() {

      var self = this;

      self.Colors = ko.observableArray([]);
      self.ColorChoice = ko.observableArray();

      self.Id = ko.observable();
      self.Color = ko.observable();

      self.init = function () {
        self.Colors.push(new Color({ id: 1, name: 'Red' }));
        self.Colors.push(new Color({ id: 2, name: 'Orange' }));
        self.Colors.push(new Color({ id: 3, name: 'Yellow' }));
        self.Colors.push(new Color({ id: 4, name: 'Green' }));
        self.Colors.push(new Color({ id: 5, name: 'Blue' }));
        self.Colors.push(new Color({ id: 6, name: 'Purple' }));
      }

      self.ToggleAssociation = function (item) {
        if (item.selected() === true)
          console.log("dissociate item " + item.id());
        else
          console.log("associate item " + item.id() + " " + item.name());
        self.Id(item.id());
        self.Color(item.name());
        item.selected(!(item.selected()));
        return true;
      };
    };

    var vm = new viewModel();
    ko.applyBindings(vm);
    vm.init();

https://jsfiddle.net/Razzle/ff1945ye/

Answer 1

您可以访问模型中的所有变量。如果我完全理解您要执行的操作并且您想在选中复选框时绑定 click 事件，则您需要执行类似这样的操作。

示例：https://jsfiddle.net/kyr6w2x3/77/

HTML:

<form role="form" data-bind="foreach: Colors">
  <input type="checkbox" data-bind="checkedValue: name, click: $root.ToggleAssociation ,checked:selected">
  <label data-bind="attr: {'for' : name}, text: id() + ' ' + name()"></label>
</form>
<div data-bind="foreach: ColorChoice">
  <span data-bind="text: name, style: { 'background-color':name }" class="colors"></span>
</div>

JS:

 function Color(data) {
  var self = this;

  self.id = ko.observable(data.id);
  self.name = ko.observable(data.name);
  self.selected = ko.observable(false);
}

function viewModel() {

  var self = this;

  self.Colors = ko.observableArray([]);
  self.ColorChoice = ko.observableArray();

  self.Id = ko.observable();
  self.Color = ko.observable();

  self.init = function () {
    self.Colors.push(new Color({ id: 1, name: 'Red' }));
    self.Colors.push(new Color({ id: 2, name: 'Orange' }));
    self.Colors.push(new Color({ id: 3, name: 'Yellow' }));
    self.Colors.push(new Color({ id: 4, name: 'Green' }));
    self.Colors.push(new Color({ id: 5, name: 'Blue' }));
    self.Colors.push(new Color({ id: 6, name: 'Purple' }));
  }

  self.ToggleAssociation = function (item) {
   // here you can go through your array and do whatever you want to do
    item.selected(!item.selected());
     ko.utils.arrayFirst(self.Colors(), function (color) {
      if(color.id() == item.id()){
       if (item.selected()){self.ColorChoice.push(color);
       }else{self.ColorChoice.remove(color);
       }
      }
     });
    return true;
  };
};

var vm = new viewModel();
ko.applyBindings(vm);
vm.init();

Answer 2

你可以像下面这样用更简单的方法来做到这一点

function Color(data) {
    var self = this;
    self.id = ko.observable(data.id);
    self.name = ko.observable(data.name);
    self.selected = ko.observable(false);
}

function viewModel() {
    var self = this;
    self.Colors = ko.observableArray([]);
    self.ColorChoice = ko.observableArray([]);
    self.init = function() {
        self.Colors.push(new Color({ id: 1, name: 'Red' }));
        self.Colors.push(new Color({ id: 2, name: 'Orange' }));
        self.Colors.push(new Color({ id: 3, name: 'Yellow' }));
        self.Colors.push(new Color({ id: 4, name: 'Green' }));
        self.Colors.push(new Color({ id: 5, name: 'Blue' }));
        self.Colors.push(new Color({ id: 6, name: 'Purple' }));
    }
};

var vm = new viewModel();
ko.applyBindings(vm);
vm.init();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<form role="form" data-bind="foreach: Colors">
    <label>
        <input type="checkbox" data-bind="value: $data, checked:$root.ColorChoice">
        <span data-bind="text: id() + ' ' + name()"></span>
    </label>
</form>
<div data-bind="foreach: ColorChoice">
    <span data-bind="text: id() + ' ' + name(), style: { 'background-color':name }"></span>
</div>

Knockout observableArray 不更新选中值的所有属性

Knockout observableArray not updating all properties on checked value

javascript

2-way-object-databinding

knockout.js