无法正确绑定 observables 的 observableArray

我有以下代码应该绑定 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 小提琴是可用的.

正如您在开头看到的，它绑定正确，并且在加载标签时绑定也有效。但问题是，当我修改输入中的元素时，绑定不会传播。我想我想念一些很简单的东西，但又找不到什么。

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

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

Demo JSFiddle.

来自文档:

$rawData

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