将敲除单选按钮值的值存储在可观察数组中

Question

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

请参阅下面的代码以了解我正在尝试做什么。基本上我想将选定的单选按钮值存储在 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

我认为您的 selectedProducts 需要是一个可观察数组，而不是一个可观察数组，以便监视实际内容，而不是它的长度：

this.selectedProducts=[ko.observable(),ko.observable(),ko.observable() ];

然后就可以绑定单选框了：

 <input type="radio" data-bind="
   attr: {name: 'room'+room}, 
   checkedValue: $data,
   checked: $root.selectedProducts[$data.room-1]"/>

可能有更灵活的方法将房间映射到 selectedProducts 的长度（如果房间数量不固定，您可能需要一个 observableArray of observables），$data.room-1 片段可能不会如果您的房间不是连续整数，请概括一下，但这应该会给您一些指导。

完整代码位于http://jsfiddle.net/yq6jx8v7/

Answer 2

您可以尝试绑定onclick事件，手动制作selectedProducts。

Html:

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

点击绑定：

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

将敲除单选按钮值的值存储在可观察数组中

Storing values from knockout radio button values in observable array

javascript

knockout.js