Fatal编程技术网
  • javascript/
  • Javascript 使用敲除映射JSON无法填充类型定义的对象属性

Javascript 使用敲除映射JSON无法填充类型定义的对象属性

javascript knockout.js

Javascript 使用敲除映射JSON无法填充类型定义的对象属性,javascript,knockout.js,knockout-2.0,knockout-mapping-plugin,Javascript,Knockout.js,Knockout 2.0,Knockout Mapping Plugin,我正在尝试使用knockout.mapping插件映射JSON数据，但是Hierarcial JSON数据无法正确填充我的对象属性，顶层加载很好，但没有子“RootTarget”数据 我做错了什么 淘汰Javascript var Query = function(json) { this.ID = ko.observable(0); this.Name = ko.observable(); this.RootTargetID = ko.observable();

我正在尝试使用knockout.mapping插件映射JSON数据，但是Hierarcial JSON数据无法正确填充我的对象属性，顶层加载很好，但没有子“RootTarget”数据

我做错了什么

淘汰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>


TypeScript敲除映射查询测试
TypeScript敲除映射查询测试
查询名称：



RootTarget值的快速测试

RootTarget.ID:

RootTarget.Name：
因为您的
RootTarget
被声明为
ko.observable
，这是一个函数，因此您需要使用空参数调用它以获取其值并访问存储的对象

因此，您只需更改绑定并添加缺少的
（）
：

演示

它有一些很好的优点：

  • 您不必重复
    RootTarget
  • 带有的
    会自动打开可观察对象，因此您只需使用：RootTarget
    编写
    ，无需任何参数
  • 它适用于
    RootTarget
    值为
    null
    或
    undified
    的情况，因此当原始解决方案
    RootTarget（）.ID
    将引发null引用异常时，它会隐藏输入
您需要在roottarget映射上使用括号，因为您需要在获取可观察对象的属性之前对其进行评估

<p>RootTarget.ID: <input data-bind="value: RootTarget().ID" /></p>
您可以发布JSFIDLE示例吗？只需复制您的json数据并将其作为静态数据进行测试就可以了。首先，您应该这样做。幸运的是@nevesv在下面的答案中贴出了一个小提琴补丁。我真是个白痴，哈哈，我知道它很简单，但就是看不到明显的东西，谢谢你，先生：）它是从这个问题的打字类定义转换而来的，但我想同样的规则也会适用于这里，好提示！谢谢：） 
<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 -->

<p>RootTarget.ID: <input data-bind="value: RootTarget().ID" /></p>

this.RootTarget = ko.observable;