Knockout JS - 如何正确绑定 observableArray答案

【问题标题】：Knockout JS - How to correctly bind an observableArrayKnockout JS - 如何正确绑定 observableArray
【发布时间】：2012-03-19 14:42:37
【问题描述】：

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

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

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

$data 是实际值，而不是您通常绑定的可观察函数。这似乎应该是一个非常简单的过程，但是我无法弄清楚。

在其他情况下，我使用了可观察数组，并有一个可观察对象作为可观察数组的每个元素。我想知道如何让它与可观察数组一起工作。

谢谢

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

如果您将读/写绑定到数组或 observableArray 中的项目，那么它们将需要是对象的属性。否则，$data 将是展开后的 observable，KO 无法写入实际的 observable。

您必须执行以下操作：

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 对值的变化做出反应（您的示例确实需要做出反应，因为您正在显示水果的只读列表）。

【讨论】：

跟进 - 显示 observableArray 长度的正确方法是什么？以你的小提琴为起点jsfiddle.net/wWDvW
你需要像fruit().length这样的底层数组

【解决方案2】：

这是我的技巧：

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

【讨论】：