Question

我目前正在做以下事情以补偿布尔值不能很好地映射到单选按钮。我被绑定1和0绑定到值（而不是true和false），因为字段是如何从observable中读出的。 Pref1 / Pref2的值来自服务器的true / false布尔值。这里的关键是我不仅希望数据绑定单选按钮的已检查值以匹配对象中的true / false，而且还希望将布尔值true / false写回到GraduationClass对象中。我的补偿代码不仅丑陋，而且不具备可扩展性。

<input type="radio" value="1" name="radioGroup" data-bind="checked: Pref1" />Yes
<input type="radio" value="0" name="radioGroup" data-bind="checked: Pref2" />No    
<a href="javascript:void(0);" data-bind="click: $root.saveGraduationClass ">Save</a>  

function SiteSettingsViewModel() {
    var self = this;
    this.saveGraduationClass = function(graduationClass) {
        // hack until i get a custom radio button binding
        if (graduationClass.Pref1() == 1) {
            graduationClass.Pref1(true);            
        } else {
            graduationClass.Pref1(false);            
        }  

        if (graduationClass.Pref2() == 1) {
            graduationClass.Pref2(true);
        } else {
            graduationClass.Pref2(false);
        }

        // ...ajax call to save graduationClass to the server
    }

function GraduationClass(data) {
    var self = this;
    ko.mapping.fromJS(data, {}, this);
}

Answer 1

这是来自knockoutJs网站的示例，演示了如何使用单选按钮 “已检查”属性：

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
    Preferred flavor of spam:
    <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div>
    <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div>
    <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div>
</div>

<script type="text/javascript">
    var viewModel = {
        wantsSpam: ko.observable(true),
        spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button
    };

    // ... then later ...
    viewModel.spamFlavor("msg"); // Now only Monosodium Glutamate is checked
</script>

但是我不明白为什么你使用两个对象 - 一个radiobutton组“radioGroup”的“Pref1”和“Pref2”？在这种情况下，您可以使用一个对象，例如使用“spamFlavor”。

所以，请详细描述你想要绑定的内容：一个radiobuttons组合一个选定值，或其他东西。

您也可以使用计算的观察值来计算不同的值，请参阅example。

knockout.js布尔数据绑定问题与单选按钮

1 个答案: