javascript - 将 knockout 单选按钮值中的值存储在可观察数组中

Question

我是 knockout 新手，我一直在寻找以下问题的答案，但没有找到答案:我有几个单选按钮列表，我想将所选单选按钮的选定值存储在数组中的每个单选按钮列表中(数组中的第一个索引应包含第一个单选按钮列表中的选定值，依此类推)。这可以通过任何方式完成吗？

请参阅下面的代码以了解我想要做什么。基本上我想将选定的单选按钮值存储在 observableArray selectedProducts 中。

function Product(id, name, room) {
  this.id = id;
  this.name = name;
  this.room = room;
}

var listOfProds = [
  new Product(1, 'Prod1', 1),
  new Product(2, 'Prod2', 1),
  new Product(3, 'Prod3', 1),
  new Product(1, 'Prod1', 2),
  new Product(2, 'Prod2', 2),
  new Product(3, 'Prod3', 2)
];

var viewModel = {
  products: ko.observableArray(listOfProds),
  selectedProducts: ko.observableArray()
};

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: products">
  <li>
    <input type="radio" data-bind="attr: {name: 'room'+room}, checkedValue: $data, checked: $root.selectedProducts" />[
    <span data-bind="text: room"></span>]
    <span data-bind="text: name"></span>
  </li>
</ul>
<hr/>
<div data-bind="text: ko.toJSON($root)"></div>

Answer 1

您可以尝试绑定(bind)onclick事件并手动制作selectedProducts。

HTML:

<input type="radio" data-bind="attr: {name: 'room'+room}, click: $root.addSelectedElement" />

点击绑定(bind):

self.addSelectedElement = function(data) {
    var productInRoomArr = self.selectedProducts().filter(function(product) {
        return product.room == data.room;
    });
    if (productInRoomArr.length > 0) {
        var productInRoom = productInRoomArr[0];
        if (productInRoom.id == data.id)
            return true;
        var index = self.selectedProducts.indexOf(productInRoom);
        if (index > -1) {
            self.selectedProducts.splice(index, 1);
        }
    }
    self.selectedProducts.push(data);
    return true;}

JsFiddle