如何在可观察数组中淘汰可观察对象答案

【问题标题】：How to do Knockout observable objects inside observable array如何在可观察数组中淘汰可观察对象
【发布时间】：2013-05-30 15:50:16
【问题描述】：

我想实现一个可观察数组，并且在该数组内部应该有可观察对象（JS 对象）。在视图中，我正在迭代这个数组并获取对象并显示对象属性。假设有一个像下面这样的对象，

{"name":"john","age":21,"address":"No 25"}

想象一下 observable 数组是由上面的对象组成的。

然后我想更改特定对象的单个属性（例如名称）并需要查看视图上的更改。

如何使用淘汰赛来做到这一点？

谢谢。

【问题讨论】：

标签： javascript knockout.js knockout-2.0

【解决方案1】：

如果您在 viewModel 中设置用户并使用 knockout mapping 映射它，您应该会得到所需的结果。比如：

myObservableArray.push(new UserViewModel( {"name":"john","age":21,"address":"No 25"} ));  

var UserViewModel = function(data){
    var self = this;
    ko.mapping.fromJS(data, {}, self);    
}

这样每个映射的属性都将是一个可观察的，当它们发生变化时，这将反映在您的标记中。

【讨论】：

截至目前，答案中引用的插件似乎已被放弃。
它仍然适用于最新版本的 Knockout (3.4.0)

【解决方案2】：

要将模型转换为可观察的视图模型，您可以使用ko.utils.arrayMap 和ko.mapping.fromJS。

var source = [{"name":"john","age":21,"address":"No 25"}];
var vm = ko.utils.arrayMap(source, function (item) {
    return  ko.mapping.fromJS(item)
});

See fiddle

【讨论】：

【解决方案3】：

只需为您的数据项定义一个新模型并使每个属性都可观察，如下所示：

var dataItemModel = function (name, age, address) {
    this.name = ko.observable(name);
    this.age = ko.observable(age);
    this.address = ko.observable(address);
}

当您获取数据时，循环遍历它们，创建您的 dataItemModel（具有可观察属性），然后将此项目添加到您的 ObservableArray。

【讨论】：