单选按钮 Knockoutjs [英] Radio buttons Knockoutjs

问题描述

我从服务器 A 和 B 获得了 2 个值.我一次只能有一个为真.

同样，我需要一次检查其中一台收音机，所以只有一个真值.

var viewModel = {radioSelectedOptionValue: ko.observable("false"),A: ko.observable("false"),B: ko.observable("false")};ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
<h3>无线电视图模型</h3><表格><tr><td class="label">单选按钮:</td><td><label><input name="Test" type="radio" value="True" data-bind="checked: A"/>Alpha</label><label><input name="Test" type="radio" value="True" data-bind="checked: B"/>Beta</label></td></tr>A-<span data-bind="text: A"></span>B-<span data-bind="text: B"></span>

解决方案

checked 绑定对于单选按钮和复选框的工作方式不同:

来自文档:

<块引用>

对于单选按钮，KO 将设置要检查的元素 当且仅如果参数值等于单选按钮节点的value属性.因此，您的参数值应该是字符串.

因此您需要将输入的 value 属性设置为A"和B"，然后绑定到包含A"或的 radioSelectedOptionValue"B"取决于选择了哪些选项:

<input name="Test" type="radio" value="A"数据绑定=检查:radioSelectedOptionValue"/>Α<标签><input name="Test" type="radio" value="B"数据绑定=检查:radioSelectedOptionValue"/>测试版

如果你想保留你的布尔属性:A 和 B，你需要让它们ko.computed(只读，writable) 将使用/转换 radioSelectedOptionValue 的值:

this.radioSelectedOptionValue = ko.observable();this.A = ko.computed( {阅读:函数(){返回 this.radioSelectedOptionValue() == "A";},写:函数(值){如果(值)this.radioSelectedOptionValue("A");}}， 这);

演示 JSFiddle.

I have 2 values that I get from server A and B. I can only have one true at a time.

Again what I need is one of the radios to be checked at a time so one true value only.

var viewModel = {
    radioSelectedOptionValue: ko.observable("false"),
    A: ko.observable("false"),
    B: ko.observable("false") 
};
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
<div class='liveExample'>    
        <h3>Radio View model</h3>
        <table>
        <tr>
            <td class="label">Radio buttons:</td>
            <td>
                <label><input name="Test" type="radio" value="True" data-bind="checked: A" />Alpha</label>
                <label><input name="Test" type="radio" value="True" data-bind="checked: B" />Beta</label>
            </td>
        </tr>
    </table>  
    A-<span data-bind="text: A"></span>
    B-<span data-bind="text: B"></span>
</div>

解决方案

The checked binding works differently for radio buttons and checkboxes:

From the documentation:

For radio buttons, KO will set the element to be checked if and only if the parameter value equals the radio button node’s value attribute. So, your parameter value should be a string.

So you need to set the value attribute of your inputs to "A" and "B" and then bind to the radioSelectedOptionValue which will contain "A" or "B" depending on which options is selected:

<label>
    <input name="Test" type="radio" value="A" 
             data-bind="checked: radioSelectedOptionValue" />
    Alpha
</label>
<label>
    <input name="Test" type="radio" value="B" 
             data-bind="checked: radioSelectedOptionValue" />
    Beta
</label>

If you want to keep your boolean properties: A and B, you need to make them ko.computed (read-only, writable) which will use/convert the value of the radioSelectedOptionValue:

this.radioSelectedOptionValue = ko.observable();
this.A = ko.computed( {
        read: function() {
            return this.radioSelectedOptionValue() == "A";
        },
        write: function(value) {
            if (value)
                this.radioSelectedOptionValue("A");
        }
    }, this);

Demo JSFiddle.

这篇关于单选按钮 Knockoutjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！