使用 Knockout hasFocus 绑定，如何跟踪一组单选按钮的焦点？

Question

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

你可以测试一下fiddle:

文本框焦点 observable 工作正常，但单选按钮不行。如果只有 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 为真，否则为假。

Answer 1

您的问题是单选按钮是单独的输入；该组不形成单个输入。他们不能同时拥有焦点，因此 hasFocus 绑定失败。他们必须各自绑定自己的可观察焦点。

<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.

如果您希望某个值在组中的任何单选按钮为真时为真，则需要自定义绑定。如果将绑定值设置为 true，您会如何想象此绑定的行为？小组中的第一个输入是否会成为焦点？

使用 Knockout hasFocus 绑定，如何跟踪一组单选按钮的焦点？

Using the Knockout hasFocus binding, how do I track the focus of a group of radio buttons?

focus

radio-button

knockout.js