无法正确绑定 observables 的 observableArray

Question

我有以下代码应该绑定 observables 的 observableArray。

<button data-bind="click: loadTag">Upload</button>
<span data-bind="foreach: langs">
    <input data-bind="value: $data, valueUpdate: 'afterkeydown'"/>
</span>

<div data-bind = "text: ko.toJS(langs)">

function vm() {
    var self = this;
    this.langs      = ko.observableArray([]);

    this.initiate = function(){
        self.langs = ko.observableArray([]);
        for (var i = 0; i < 4; i++){
            self.langs.push(ko.observable('start'));
        }
    }
    this.initiate();

    this.loadTag = function(){
        for (var i = 0; i < 4; i++){
            self.langs()[i](i);
        }
    }
}

ko.applyBindings(new vm());

JS 小提琴是available。

正如您在开始时看到的那样，它正确绑定，并且在 loadTag 时绑定也有效。但问题是当我修改输入中的元素时，绑定不会传播。我认为我错过了一些非常简单的东西，但找不到什么。

Answer 1

如果您的数组中直接有ko.observable 对象，则需要使用$rawData 而不是$data 直接绑定到可观察对象本身而不是它们的值：

<span data-bind="foreach: langs">
    <input data-bind="value: $rawData, valueUpdate: 'afterkeydown'"/>
</span>

演示JSFiddle.

来自documentation：

$rawData

这是当前上下文中的原始视图模型值。通常这个 将与$data 相同，但如果提供给 Knockout 的视图模型 被包裹在一个 observable 中，$data 将是展开的视图模型， 而$rawData 本身就是可观察对象。