Question

这是我的情景：

我有物品。每个项目都有一个无线电选项列表。各项目的选项相同。选择单选选项后，我需要检查它是否有效。我这样做是通过检查互斥项目没有选择相同的选项。

例如

项目A. - 基金1 - 基金2 - 没有基金

项目B. - 基金1 - 基金2 - 没有基金

项目C. - 基金1 - 基金2 - 没有基金

让我们假设项目A和项目B是互斥的。因此，可以在项目A上选择基金1，但不在项目B上选择基金1.如果发生这种情况，则项目A和项目B无效。但是，可以在A和C或B和C上选择基金1。

我如何使用淘汰赛来做这件事？构建它的最佳方法是什么？

我有一个项目列表，每个项目都有一个带有“选定”属性的无线电选项列表。我正在订阅所选属性，其想法是更新父属性（Item）上的标志以指示是否可以选择该项。当任何子属性发生更改时，需要对所有父属性执行此操作。从孩子那里更新父母似乎不是一个好主意。有什么想法/建议吗？

Answer 1

所以基本问题是Item A和Item B不能具有相同的值，Item C与我理解的有些无关，因为它始终有效。< / p>

在两个单选按钮列表上进行选择时，可以使用computed确定相等性。由于您还没有提供示例代码，我已经创建了一个演示来说明：

JS Fiddle Demo

<强> HTML：

<p>Item A: 
   <span class="error" data-bind="visible: !isValidA()">Invalid Selection</span>
</p>
<div data-bind="foreach: optionValues">
    <input type="radio" name="optionsGroup1" 
           data-bind="attr: {value: value}, 
                      checked: $root.selectionA" /> 
    <span data-bind="text: label"></span>
</div>

<p>Item B: 
   <span class="error" data-bind="visible: !isValidB()">Invalid Selection</span>
</p>
<div data-bind="foreach: optionValues">
    <input type="radio" name="optionsGroup2" 
           data-bind="attr: {value: value}, 
                      checked: $root.selectionB" /> 
    <span data-bind="text: label"></span>
</div>

<p>Item C: 
   <span class="error" data-bind="visible: !isValidC()">Invalid Selection</span>
</p>
<div data-bind="foreach: optionValues">
    <input type="radio" name="optionsGroup3" 
           data-bind="attr: {value: value}, 
                      checked: $root.selectionC" /> 
    <span data-bind="text: label"></span>
</div>

<强>视图模型：

var viewModel = {
    optionValues: [{
        "value": "1",
            "label": "Fund 1"
    }, {
        "value": "2",
            "label": "Fund 2"
    }, {
        "value": "0",
            "label": "No Fund"
    }],
    selectionA: ko.observable("0"),
    selectionB: ko.observable("0"),
    selectionB: ko.observable("0"),
    isValidA: ko.computed = function () {
        return (this.selectionA() !== this.selectionB())
            || (this.selectionA() === "0");
    },
    isValidB: ko.computed = function () {
        return (this.selectionA() !== this.selectionB()) 
            || (this.selectionB() === "0");
    },
    isValidC: ko.computed = function () {
        return true;
    }
};
ko.applyBindings(viewModel);

计算将在每次单选按钮更改时重新计算，因此它可以评估选择是否有效，并且您可以根据结果执行其他逻辑，在这种情况下，我只是简单地控制可见性或带有结果的错误标签。

所有项目都已初始化为No Fund，如果Item A和Item B具有相同的No Fund选项，则目前不会导致错误。要使其导致错误，只需删除计算中比较的第二部分，如下所示：

isValidA: ko.computed = function () {
    return this.selectionA() !== this.selectionB();
}

当父母互相排斥时，Knockout会验证孩子

1 个答案:

JS Fiddle Demo