4

我的模型上有一个计算属性，它只是将逗号分隔的字符串拆分为一个数组，我希望能够利用“已检查”绑定的特殊数组功能通过计算属性写回更改。

一切都非常适合读取计算的属性，但是一旦我选中其中一个复选框，我就会收到有关某些功能不支持拼接（如果我取消选中）或不支持推送（如果我选中）的错误。

> Uncaught TypeError: Object function
> h(){if(0<arguments.length)return"function"===typeof
> v?v.apply(d,arguments):j(Error("Cannot write a value to a ko.computed
> unless you specify a 'write' option. If you wish to read the current
> value, don't pass any parameters.")),this;n||g();b.r.Wa(h);return l}
> has no method 'splice' knockout-min.js:60 (anonymous function)

我在 jsfiddle 上创建了一个快速示例来说明发生了什么。http://jsfiddle.net/Y6tXw/

var MyModel = function() {
    this.src = ko.observable("one,two");
    this.comp = ko.computed({
        read: function() {
            return (this.src() || "").split(",");
        },
        write: function(value) {
            var csvs = (value || []).join(",");
            this.src(csvs);
        },
        owner: this
    });
};

var model = new MyModel();
ko.applyBindings(model);

它从不调用我的 write 函数。似乎它在绑定中崩溃了。我究竟做错了什么？

4

2 回答 2

4

在上述情况下，comp 在计算中，而不是数组中。我已经修改了你的代码。我使用 subscribe 来收听 comp 提出的更改通知并重新计算 sec 的值

<input type="checkbox" value="one" data-bind="{ checked: comp }"/>
<input type="checkbox" value="two" data-bind="{ checked: comp }"/>
<input type="checkbox" value="three" data-bind="{ checked: comp }"/>
<input type="text" data-bind="{ value: src }"/>


var MyModel = function () {

    var self = this;

    self.src = ko.observable("one,two");

    self.comp = ko.observableArray((self.src() || "").split(","));

    self.comp.subscribe(function () {
        self.src(ko.utils.unwrapObservable(self.comp).join(","));
    });
};

$(function () {
    var model = new MyModel();
    ko.applyBindings(model);
})
于 2013-02-01T03:42:03.077 回答
2

Knockout 假设你绑定的是一个可观察的数组。我不认为他们打算支持这个选项。（至少现在还没有）为了解决这个问题，换一种方式会更容易。使数组成为数组，并src改为计算。

function ViewModel(data) {
    this.comp = ko.observableArray(["one","two"]);
    this.src = ko.computed({
        read: function () {
            return this.comp().join(",");
        },
        write: function (value) {
            this.comp(value.split(","));
        },
        owner: this
    });
}
于 2013-02-01T03:47:11.707 回答