Knockout JS - 如何正确绑定observableArray

时间:2012-03-01 04:15:56

标签: javascript knockout.js

请看一下这个例子。 http://jsfiddle.net/LdeWK/2/

我想知道如何绑定可观察数组的值。我知道上面例子中的问题,就是这一行

<p>Editing Fruit: <input data-bind="value: $data" /></p>

$ data是实际值,而不是您通常绑定的可观察函数。 这似乎应该是一个非常直接的过程,但我无法弄明白。

在其他情况下,我使用了可观察数组,并且有一个可观察对象作为可观察数组的每个元素。我想知道如何使用可观察的数组来实现它。

由于

2 个答案:

答案 0 :(得分:17)

如果您对数组或observableArray中的项进行读/写绑定,则它们将需要是对象的属性。否则,$data将是未包装的可观察对象,并且KO无法写入实际的可观察对象。

您必须执行以下操作:

var ViewModel = function(myFruit) {
    var observableFruit = ko.utils.arrayMap(myFruit, function(fruit) {
        return { name: ko.observable(fruit) }; 
    });
    this.fruit = ko.observableArray(observableFruit);
};


ko.applyBindings(new ViewModel( ["Apple", "banana", "orange"] )); 

以下是一个示例:http://jsfiddle.net/rniemeyer/LdeWK/3/

单个水果不一定需要是可观察的,除非你需要你的UI来对变化的值作出反应(你的样本确实需要做出反应,因为你正在显示水果的只读列表)。

答案 1 :(得分:0)

这是我的黑客:

<!-- ko foreach: list().map(observable => ({ value: observable })) -->
    <input type="text" data-bind="value: value">
<!-- /ko -->