将真/假绑定到Knockout JS中的单选按钮

Question

在我的视图模型中,我有一个IsMale值,其值为true或false.

在我的UI中,我希望将其绑定到以下单选按钮:

<label>Male
   <input type="radio" name="IsMale" value="true" data-bind="checked:IsMale"/>
</label> 
<label>Female
   <input type="radio" name="IsMale" value="false" data-bind="checked:IsMale"/>
</label>

我认为这个问题checked需要一个字符串"true"/"false".所以我的问题是,如何通过这个UI和模型获得这种双向绑定？

Answer 1

我知道这是一个老线程,但我遇到了同样的问题,发现了一个更好的解决方案,可能在这个问题被正式回答之后添加到淘汰赛中,所以我会把它留给有同样问题的人.

目前不需要扩展器,自定义绑定处理程序或计算机.只需提供一个"checkedValue"选项,它将使用它而不是html'value'属性,并且可以使用它传递任何javascript值.

<input type="radio" name="a" data-bind="checked:IsChecked, checkedValue: true"/>
<input type="radio" name="a" data-bind="checked:IsChecked, checkedValue: false"/>

要么:

<input type="radio" name="b" data-bind="checked:Quantity, checkedValue: 1"/>
<input type="radio" name="b" data-bind="checked:Quantity, checkedValue: 2"/>
<input type="radio" name="b" data-bind="checked:Quantity, checkedValue: 3"/>

Answer 2

一种选择是使用可写的计算可观察量.

在这种情况下,我认为一个不错的选择是使可写的计算的observable成为你的IsMaleobservable 的"sub-observable" .您的视图模型如下所示:

var ViewModel = function() {
   this.IsMale = ko.observable(true);

   this.IsMale.ForEditing = ko.computed({
        read: function() {
            return this.IsMale().toString();  
        },
        write: function(newValue) {
             this.IsMale(newValue === "true");
        },
        owner: this        
    });          
};

你可以在你的UI中绑定它,如:

<label>Male
   <input type="radio" name="IsMale" value="true" data-bind="checked:IsMale.ForEditing"/>
</label> 
<label>Female
   <input type="radio" name="IsMale" value="false" data-bind="checked:IsMale.ForEditing"/>
</label>

示例:http://jsfiddle.net/rniemeyer/Pjdse/

Answer 3

这对我有用:

http://jsfiddle.net/zrBuL/291/

<label>Male
   <input type="radio" name="IsMale" value="1" data-bind="checked:IsMale"/>
</label> 
<label>Female
   <input type="radio" name="IsMale" value="0" data-bind="checked:IsMale"/>
</label>