使用剔除映射JSON无法填充类型定义的对象属性 [英] Mapping JSON with knockout fails to populate type defined object properties
问题描述
我正在尝试使用基因敲除(mockout.mapping)插件映射JSON数据，但是杂乱的JSON数据无法正确填充我的对象属性，顶层可以很好地加载，但子'RootTarget'数据却不能加载?
I'm trying to map JSON data using the knockout.mapping plugin, however the heirarcical JSON data fails to populate my object properties correctly, the top level loads fine but not the child 'RootTarget' data?
我在做什么错了?
淘汰Javascript
var Query = function(json)
{
this.ID = ko.observable(0);
this.Name = ko.observable();
this.RootTargetID = ko.observable();
this.RootTarget = ko.observable();
var mapping = {
'RootTarget': {
create: function (args) {
return new QueryTarget(args.data, null);
}
}
};
ko.mapping.fromJS(json, mapping, this);
}
var QueryTarget = function(json, parent)
{
this.ID = ko.observable(0);
this.Name = ko.observable();
this.ParentID = ko.observable(0);
this.Parent = ko.observable(parent);
this.FilterID = ko.observable(0);
var mapping = {
'ignore': ["Parent"]
};
ko.mapping.fromJS(json, mapping, this);
}
var QueryModuleViewModel = function()
{
var json = {
"ID": 2,
"Name": "Northwind 2",
"RootTargetID": 2,
"RootTarget": {
"ID": 2,
"Name": "Customers",
"ParentID": null,
"FilterID": 2,
"Parent": null
}
};
this.QueryObj = new Query(json);
}
window.onload = function () {
ko.applyBindings(new QueryModuleViewModel());
};
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TypeScript Knockout Mapping Query Test</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="Scripts/jquery-2.0.2.js" type="text/javascript"></script>
<script src="Scripts/knockout-2.2.1.debug.js" type="text/javascript"></script>
<script src="Scripts/knockout.mapping-latest.debug.js" type="text/javascript"></script>
<script src="my_js_query_test.js"></script>
</head>
<body>
<h1>TypeScript Knockout Mapping Query Test</h1>
<div data-bind="with: QueryObj">
<span data-bind="blah: console.log($context)"></span>
<p>Query Name: <input data-bind="value: Name" /></p>
<hr />
<p>Quick test of RootTarget Values</p>
<p>RootTarget.ID: <input data-bind="value: RootTarget.ID" /></p>
<p>RootTarget.Name: <input data-bind="value: RootTarget.Name" /></p>
</div>
</body>
</html>
推荐答案
由于您的RootTarget被声明为ko.observable这是一个函数，因此您需要使用空参数()对其进行调用以获取其值，并且访问存储的对象.
Because your RootTarget is declared as an ko.observable which is a function so you need to call it with empty args () to get its value and access the stored object.
因此，您只需要更改绑定并添加缺少的():
So you just need to change your bindings and add the missing ():
<p>RootTarget.ID: <input data-bind="value: RootTarget().ID" /></p>
<p>RootTarget.Name: <input data-bind="value: RootTarget().Name" /></p>
演示 JSFiddle.
或者您可以在此处使用with绑定
Or you can use here the with binding
<p>Quick test of RootTarget Values</p>
<!-- ko with: RootTarget -->
<p>RootTarget.ID: <input data-bind="value: ID" /></p>
<p>RootTarget.Name: <input data-bind="value: Name" /></p>
<!-- /ko -->
演示 JSFiddle.
它有一些不错的优点:
- 您不必重复
RootTarget -
with自动打开可观察对象的包装，因此您只需编写with: RootTarget即可，无需任何括号 - 它适用于
RootTarget值为null或undified的情况，因此它会隐藏输入，而原始解决方案RootTarget().ID会引发空引用异常.
- you don't have to repeat
RootTarget - the
withautomatically unwraps the observables so you can just writewith: RootTarget, no parens needed - it works for the case when the
RootTargetvalue isnullorundifiedso it hides the inputs while your original solutionRootTarget().IDwould throw a null reference exception.
这篇关于使用剔除映射JSON无法填充类型定义的对象属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
