使用 ko.mapping.fromJS 将奇怪的行为映射数组到 observableArray答案

【问题标题】：Strange behaviour mapping array to observableArray with ko.mapping.fromJS使用 ko.mapping.fromJS 将奇怪的行为映射数组到 observableArray
【发布时间】：2012-03-28 06:28:22
【问题描述】：

我正在尝试使用淘汰映射插件将对象数组映射到 observableArray。不知何故，这似乎对我根本不起作用。

我刚刚用 Crome 控制台测试验证：

ko.mapping.fromJS( [ { x: 1, y: "test" } ] )

returns:
[]

我做错了什么？如果我尝试以下

ko.mapping.fromJS( [ { x:1, y: "test" } ][0] )

returns an object containing x and y as observables...

这一切都很好。唯一的区别是我只传递一个对象而不是一组对象。但是，如果我正确阅读了映射插件的文档，它应该能够处理从普通数组创建 observableArray 的问题。

感谢您的帮助，
安德烈亚斯

【问题讨论】：

在 Chrome 的控制台中确保您正在查看 observableArray myObservableArray() 的展开值。仅打印 observableArray 本身可能会产生误导。
正如 RP 所说...您只是在查看错误的值。这是一个可以用来验证的小提琴。在 ko.mapping 行设置断点并输入：ko.mapping.fromJS(data)，你会看到 []。如果你输入：ko.mapping.fromJS(data)()，你会看到 [Object, Object, Object, Object]。 jsfiddle.net/jearles/y4b9e/8
谢谢大家，Chrome 欺骗了我，只打印 [] 表示一个空数组。但是你是绝对正确的，如果我在表达式后面加上括号，它就可以显示内容。这么快就拿到cmets真是太好了！ Stackoverflow 摇滚...

标签： knockout.js knockout-mapping-plugin

【解决方案1】：

ko.mapping.fromJS(data, {}, self.items);

【讨论】：

【解决方案2】：

这就是它应该做的事情（至少在理论上/文档中），但显然这不是它正在做的事情。我也有同样的问题，我也相信其他问题：https://groups.google.com/forum/?fromgroups=#!topic/knockoutjs/uKY84iZaxcs

对象必须是：

{ "someName" : [ { x: 1, y: "test" } ] }

要坚持您的对象架构，您可以使用 ko.utils.arrayMap 将对象映射到您的 KO ViewModel：http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html

function Item(name, category, price) {
    this.name = ko.observable(name);
    this.category = ko.observable(category);
    this.price = ko.observable(price);
    this.priceWithTax = ko.dependentObservable(function() {
        return (this.price() * 1.05).toFixed(2);
    }, this);
}

//do some basic mapping (without mapping plugin)
var mappedData = ko.utils.arrayMap(dataFromServer, function(item) {
    return new Item(item.name, item.category, item.price);
});

编辑

我对此进行了更多研究，您实际上可以使用 KO 映射映射 JS 数组对象，但是，映射后的对象不会是 KO Observable Array。它只是普通的 JS 数组对象，就此而言，您可以使用 KO 进行数据绑定：

var bd = [ { x: 1, y: "bd test" }, { x: 2, y: "bd test 1dsf" } ];

var bdViewModel = ko.mapping.fromJS(bd);

// 'bdViewModel' is NOT KO Observable Array, so you can't use KO Binding. However, all the properties of 'bdViewModel' (x and y) are KO Observable.
//ko.applyBindings(bdViewModel, $("#bd").get(0));
console.log(bdViewModel());

// 'bdViewModel' must be called as function (with open and close parentheses) to see the data.
$.each(bdViewModel(), function (i, d) {
  $("#bdList").append("<li>" + d.y() + "</li>");
});

这是用于比较映射 JS 数组和 JSON 的 JSBin：http://jsbin.com/uzuged/5/

【讨论】：

在我的情况下不使用映射插件。我从服务器获取了一组对象，并希望将其映射到一个可观察的数组。我用过：self.MyObservArray(ko.utils.arrayMap(arrayfromServer, function (item) { return new BlogObject(item); }));