Question

我想将字符串值绑定到checked属性。 Web Service返回非布尔值，如＆＃34; yes＆＃34; - ＆＃34; no＆＃34;或＆＃34; 0＆＃34; - ＆＃34; 1＆＃34;但我不会＆＃39;知道如何操纵它们。

在文档中出现：

对于复选框，KO将在参数值为true时设置要检查的元素，在false为false时取消选中。如果给出一个实际上不是布尔值的值，它将被松散地解释。这意味着非零数字和非空对象以及非空字符串都将被解释为true，而零，空，未定义和空字符串将被解释为false。当用户选中或取消选中该复选框时，KO会相应地将您的模型属性设置为true或false。

我理解上面的解释，但是......如何更改绑定的默认行为以将字符串值转换为布尔值？

var viewModel = function () {
    var self = this;
    self.username = ko.observable("william wallace");
    self.email = ko.observable("ww@mailbox.com");
    self.terms = ko.observable("false");
    self.send = function (data) {
        console.log(ko.toJSON(data));
    };
}
var vm = new viewModel();
ko.applyBindings(vm);

完整样本： http://jsfiddle.net/rferreiraperez/d5yb1krt/

Answer 1

使用可写的依赖observable在这里非常有用，特别是对于转换/验证。您可以创建一个计算的observable，它可以充当您的observable的转换层。您的observable仍然可以保留您期望使用的值（"yes"或"no"值），并且observable可以帮助将值转换为所需类型的值。

可以使用扩展程序创建计算的observable，以帮助使其可重用。

ko.extenders.converter = function (target, options) {
    var name = options.name || 'converted',
        fromValue = options.fromValue || passthrough,    // from target value (read)
        toValue = options.toValue || passthrough;        // to target value (write)
    target[name] = ko.dependentObservable({
        read: function () {
            return fromValue(target());
        },
        write: function (value) {
            target(toValue(value));
        }
    });
    return target;

    function passthrough(value) { return value; }
};

通过这种方式，您可以创建函数来转换值并扩展observable。

function BooleanConverter(trueValue, falseValue, name) {
    this.name = name || 'converted';
    this.fromValue = function (value) {
        switch (value) {
            case trueValue: return true;
            case falseValue: return false;
        }
    }.bind(this);
    this.toValue = function (value) {
        return !!value ? trueValue : falseValue;
    }.bind(this);
}
// ...
self.terms = ko.observable("no").extend({
    converter: new BooleanConverter("yes", "no")
});

将terms扩展为具有转换值，您可以绑定到视图中的值。

<p>
    <input type="checkbox" name="termsCheckBox" data-bind="checked: terms.converted" />
    <label for="termsCheckBox">accept terms and conditions</label>
</p>

fiddle

将字符串值绑定到checkbox checked属性

1 个答案: