knockout.js - 使用 Knockout hasFocus 绑定(bind)，如何跟踪一组单选按钮的焦点？

Question

我正在使用 knockout js，并且我有一些单选按钮已应用 hasFocus绑定(bind)，以便我可以跟踪哪个控件具有焦点。但它不适用于单选按钮。

你可以测试这个 fiddle 发生了什么:

https://jsfiddle.net/qttxfvqs/1/

可观察的文本框焦点工作正常，但单选按钮不能。如果只有 2 个单选按钮，我会得到更奇怪的结果。

html:

<div><input type="text" data-bind="hasFocus: textFocus" /></div>

<div>    
    <label for="option1">
        <input type="radio" id="option1" name="options" value="option1" data-bind="hasFocus: radioFocus" checked />
        Option 1
    </label>
</div>

<div>
    <label for="option2">
        <input type="radio" id="option2" name="options" value="option2" data-bind="hasFocus: radioFocus" />
        Option 2
    </label>    
</div>

<div>
    <label for="option3">
        <input type="radio" id="option3" name="options" value="option3" data-bind="hasFocus: radioFocus" />
        Option 3
    </label>    
</div>

<hr />

<dl>
    <dt>Text box has focus</dt>
    <dd data-bind="text: textFocus">-</dd>

    <dt>Radio buttons have focus</dt>
    <dd data-bind="text: radioFocus">-</dd>
</dl>

js:

var m = function() {

    this.textFocus = ko.observable(true);
    this.radioFocus = ko.observable(false);

};

ko.applyBindings(new m());

我如何解决它？我要 radioFocus如果任何单选按钮具有焦点，则为 true，否则为 false。

Answer 1

您的问题是单选按钮是单独的输入；该组不形成单个输入。他们不能同时拥有焦点，所以 hasFocus绑定(bind)失败。他们每个人都必须绑定(bind)自己的可观察焦点。

<div>    
    <label for="option1">
        <input type="radio" id="option1" name="options" value="option1" data-bind="hasFocus: radioFocus1" checked />
        Option 1
    </label>
</div>

<div>
    <label for="option2">
        <input type="radio" id="option2" name="options" value="option2" data-bind="hasFocus: radioFocus2" />
        Option 2
    </label>    
</div>


var m = function() {

    this.textFocus = ko.observable(true);
    this.radioFocus1 = ko.observable(false);
    this.radioFocus2 = ko.observable(false);

};

这是 working fiddle .

如果您希望在组中的任何单选按钮为真时使值为真，则需要自定义绑定(bind)。如果您将绑定(bind)值设置为 true，您会如何想象此绑定(bind)的行为？小组中的第一个输入会变得集中吗？