Question

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

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

您可以尝试绑定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

Answer 2

我认为你的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 observable），$data.room-1代码段可能不会概括。你的房间不是连续的整数，但这应该给你一些方向。

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

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

2 个答案: