使用knockout.mapping,我尝试从JSON映射到ko-object。当尝试使用带有映射选项的更高级解决方案时,我经常遇到Uncaught TypeError: g is not a function
.我试图找出问题所在,但我仍然感到困惑。
假设我有非常简单的模型:
var data1 = { // works
a: "a",
b: [
{ b1: "v1" },
{ b2: "v2" }
]
};
现在使用此模型可以像这样工作:
function viewModel ( data ) {
var self = this;
var a = ko.mapping.fromJS( data, { observe: "a"} );
return a;
}
var vm1 = viewModel( data1 ); // works
我的模型中有两个属性(a
和b
),但我只需要a
就可以观察,而b
应该只是复制到视图模型中。
可悲的是,如果数据结构变得更深,它就不能很好地工作:
var data1 = { // works
a: "a",
b: [
{ b1: "v1" },
{ b2: "v2" }
]
};
var data2 = { // Uncaught TypeError: g is not a function
a: "a",
b: [
{ b1: { name: "v1" } },
{ b2: { name: "v2" } }
]
};
var data3 = { // Uncaught TypeError: g is not a function
a: "a",
b1: { name: "v1" },
b2: { name: "v2" }
};
var data4 = { // works
a: "a",
b1: "v1",
b2: "v2"
};
var data5 = { // works
a: "a",
b1: ["1::v1", "2::v1"],
b2: ["1::v2", "2::v2"]
};
function viewModel ( data ) {
var self = this;
var a = ko.mapping.fromJS( data, { observe: "a"} );
return a;
}
var vm1 = viewModel( data1 ); // works
var vm2 = viewModel( data2 ); // Uncaught TypeError: g is not a function
var vm3 = viewModel( data3 ); // Uncaught TypeError: g is not a function
var vm4 = viewModel( data4 ); // works
var vm5 = viewModel( data5 ); // works
复制某些结构有效而其他结构无效似乎令人困惑。我知道,当树中的某处存在多级哈希时,这个问题就会跳出来。
这是想要的行为还是我在这里出了什么问题?为什么复制某些结构有效而其他结构无效?
我已经成功地重现了您提到的问题:
var data1 = { // works
a: "a",
b: [
{ b1: "v1" },
{ b2: "v2" }
]
};
var data2 = { // Uncaught TypeError: g is not a function
a: "a",
b: [
{ b1: { name: "v1" } },
{ b2: { name: "v2" } }
]
};
function viewModel ( data ) {
var self = this;
var a = ko.mapping.fromJS( data, { observe: ["a"]} );
return a;
}
var vm1 = viewModel( data1 ); // works
var vm2 = viewModel( data2 ); // Uncaught TypeError: g is not a function
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
如您所见,在我的重现中,我包含了两个库的非缩小版本。我在错误上介入了它,它在这里,在这段代码中:
if(options.observe.length > 0 && ko.utils.arrayIndexOf(options.observe, fullPropertyName) == -1)
{
mappedRootObject[indexer] = value(); // <---- THIS LINE
options.copiedProperties[fullPropertyName] = true;
return;
}
这句话让我感到很奇怪,因为通常对于 KO,如果您不确定它们是纯值还是可观察值,则需要明确需要"解包"值。
所以我去了 Github 上的相关源代码,但令我惊讶的是,上面来自 CDNJS 版本的代码不存在,它是不同的:
if(options.observe.length > 0 && ko.utils.arrayIndexOf(options.observe, fullPropertyName) == -1)
{
mappedRootObject[indexer] = ko.utils.unwrapObservable(value); // <-- DIFFERENT
options.copiedProperties[fullPropertyName] = true;
return;
}
这条线是我所期望的方式。
再说一次,最新的调试版本再次具有错误/第一个版本。
然后再挖掘一下,我看到问题 #137 正是这个问题。该问题以我得出的相同结论结束:该修复程序不包含在 2.4.1 版本中。不太可能很快有新的构建:正如您在项目的自述文件中看到的那样,该项目目前没有被积极维护。
底线:您需要解决此问题,或者创建自己的自定义映射构建并修复此问题。
您是否考虑过定义自定义对象构造?详细信息可以在ko文档的"映射插件"页面的高级部分找到。
该文档中包含相当多的选项,用于映射到/从 JSON 对象映射的不同情况。