knockout.js - 复选框非布尔值？

Question

我有以下示例：http: //jsfiddle.net/jLkxG/6/

is_checked 属性可以有 2 个值：是或否。如果值为是，则应检查复选框，当单击保存的链接时，应根据是否选中复选框来分配属性是或否。

你会如何在 knockoutjs 中做到这一点？

Answer 1

您的第一个问题是您错过了绑定上的括号：

<input type="checkbox" value="Yes" data-bind="checked: is_checked() == 'Yes'"/>

现在复选框将在加载时正确检查。

更大的问题是单击复选框不会写回值。如果将 is_checked() 更改为布尔值，它将正常工作。因此，如果您有：

 self.is_checked = ko.observable(true);

和

data-bind="checked: is_checked"

它会工作的。取消选中该框将更新 is_checked 的值。如果是/否而不是真/假对您来说真的很重要，那么您将不得不编写一些代码来将真/假检查状态转换为是/否。有几种方法可以解决这个问题。我会尝试一个计算的 observable。见这里：http: //jsfiddle.net/jLkxG/7/

Answer 2

除了计算之外的另一种方法是使用“订阅”来监听值的变化。例如，绑定到 is_checked 并将该值设为真或假。然后订阅该 observable 并根据需要将另一个属性设置为 Yes/No。在这里查看小提琴：http: //jsfiddle.net/johnpapa/jLkxG/8/

HTML

<input type="checkbox" data-bind="checked: checkedvals.is_checked"/>
<label>Test</label><br/>

<pre data-bind="text:displayJS">
</pre>​

JavaScript

var viewModel = (function() {
    var self = this;
    self.checkedvals = {
        is_checked : ko.observable(true),
        is_checked_val : ko.observable("Yes")
    };
    self.checkedvals.is_checked.subscribe(function(){
        self.checkedvals.is_checked_val(self.checkedvals.is_checked() ? "Yes" : "No");
    });

    self.displayJS = ko.computed(function() {
        return JSON.stringify(ko.toJS(checkedvals), null, 2);
    });
})();
ko.applyBindings(viewModel);​