typescript - 将分层 JSON 映射到 TypeScript-KnockoutJS 类型对象-6ren

typescript - 将分层 JSON 映射到 TypeScript-KnockoutJS 类型对象

转载作者：搜寻专家更新时间：2023-10-30 20:37:42

让我们提前致谢:)

好的，所以我正在尝试使用 knockout.mapping 插件从匹配的 JSON 数据中加载/映射分层的 TypeScript/KnockoutJS 类型类，层次结构可以达到第 N 级。

我知道我可以执行以下操作以从 JSON 数据映射/加载顶级类。

var qry = ko.mapping.fromJS(jsData, {}, new Query());

但是我不知道如何将复杂的 N 级分层 JSON 数据映射/加载到一组 TypeScript/KnockoutJS 类并建立父/子关系。

我读过无数文章，但除了简单的父/子示例之外，在涉及层次关系时，它们都达不到要求，而且我使用 knockout.mapping 插件找不到任何文章。

这是我希望映射/加载的 TypeScript 类的缩减定义。我是一名 C++/C# 开发人员，因此这种性质的 JavaScript 对我来说非常陌生。

typescript 对象

module ViewModel
{
    export class QueryModuleViewModel {
        public QueryObj: KnockoutObservable<Query>;

        constructor() {
            this.QueryObj = ko.observable<Query>();
        }

        public Initialize() {
            $.getJSON("/api/query/2", null,
                d => {
                    var qry = ko.mapping.fromJS(d, {}, new Query());
                    this.QueryObj(qry);
                });
        }
    }

    export class Query
    {
        public ID: KnockoutObservable<number>;
        public Name: KnockoutObservable<string>;
        public RootTargetID: KnockoutObservable<number>;
        public RootTarget: KnockoutObservable<QueryTarget>;

        constructor()
        {
            this.ID = ko.observable<number>(0);
            this.Name = ko.observable<string>();
            this.RootTargetID = ko.observable<number>();
            this.RootTarget = ko.observable<QueryTarget>();
        }
    }

    export class QueryTarget
    {
        public ID: KnockoutObservable<number>;
        public Name: KnockoutObservable<string>;
        public ParentID: KnockoutObservable<number>;
        public Children: KnockoutObservableArray<QueryTarget>;
        public Parent: KnockoutObservable<QueryTarget>;
        public Selects: KnockoutObservableArray<QuerySelect>;
        public FilterID: KnockoutObservable<number>;
        public Filter: KnockoutObservable<FilterClause>;

        constructor()
        {
            this.ID = ko.observable<number>(0);
            this.Name = ko.observable<string>();
            this.ParentID = ko.observable<number>(0);
            this.Children = ko.observableArray<QueryTarget>();
            this.Parent = ko.observable<QueryTarget>();
            this.Selects = ko.observableArray<QuerySelect>();
            this.FilterID = ko.observable<number>(0);
            this.Filter = ko.observable<FilterClause>();
        }
    }

    export class QuerySelect
    {
        public ID: KnockoutObservable<number>;
        public Name: KnockoutObservable<string>;
        public Aggregation: KnockoutObservable<string>;
        public TargetID: KnockoutObservable<number>;
        public Target: KnockoutObservable<QueryTarget>;

        constructor()
        {
            this.ID = ko.observable<number>();
            this.Name = ko.observable<string>();
            this.Aggregation = ko.observable<string>();
            this.TargetID = ko.observable<number>();
            this.Target = ko.observable<QueryTarget>();
        }
    }

    export class FilterClause
    {
        public FilterClauseID: KnockoutObservable<number>;
        public Type: KnockoutObservable<string>;
        public Left: KnockoutObservable<string>;
        public Right: KnockoutObservable<string>;
        public ParentID: KnockoutObservable<number>;
        public Parent: KnockoutObservable<FilterClause>;
        public Children: KnockoutObservableArray<FilterClause>;
        public QueryTargets: KnockoutObservableArray<QueryTarget>;

        constructor()
        {
            this.FilterClauseID = ko.observable<number>();
            this.Type = ko.observable<string>();
            this.Left = ko.observable<string>();
            this.Right = ko.observable<string>();
            this.ParentID = ko.observable<number>();
            this.Parent = ko.observable<FilterClause>();
            this.Children = ko.observableArray<FilterClause>();
        }
    }
}

JSON 看起来像这样:

{
    "ID": 2,
    "Name": "Northwind 2",
    "RootTargetID": 2,
    "RootTarget": {
        "ID": 2,
        "Name": "Customers",
        "ParentID": null,
        "FilterID": 2,
        "Queries": [],
        "Children": [],
        "Parent": null,
        "Selects": [
            {
                "ID": 3,
                "Name": "CompanyName",
                "Aggregation": "None",
                "TargetID": 2,
                "Target": null
            },
            {
                "ID": 4,
                "Name": "ContactName",
                "Aggregation": "None",
                "TargetID": 2,
                "Target": null
            }
        ],
        "Filter": {
            "FilterClauseID": 2,
            "Type": "AND",
            "Left": null,
            "Right": null,
            "ParentID": null,
            "QueryTargets": [],
            "Parent": null,
            "Children": [
                {
                    "FilterClauseID": 3,
                    "Type": "NE",
                    "Left": "Country",
                    "Right": "Germany",
                    "ParentID": 2,
                    "QueryTargets": [],
                    "Parent": null,
                    "Children": []
                },
                {
                    "FilterClauseID": 4,
                    "Type": "NE",
                    "Left": "Country",
                    "Right": "Mexico",
                    "ParentID": 2,
                    "QueryTargets": [],
                    "Parent": null,
                    "Children": []
                }
            ]
        }
    }
}

最佳答案

好的，经过大量的头发拉扯和无数次测试后，我现在更进一步了。

下面是我正在努力实现的一个几乎可行的示例，唯一的问题是它似乎没有正确映射，即使单步执行代码似乎表明它正在正确加载。只有当我将它与我的绑定(bind)一起使用时，它才会在 RootTaget.Filter.Type 上抛出一个空的未引用绑定(bind)，该绑定(bind)应该填充一个值。

我仍在努力找出原因，但我欢迎就可能的错误提出建议。 :)

现已修复并可正常工作

半工作 typescript

///<reference path="Scripts/typings/jquery/jquery.d.ts"/>
///<reference path="Scripts/typings/knockout/knockout.d.ts"/>
///<reference path="Scripts/typings/knockout.mapping/knockout.mapping.d.ts"/>

module ViewModel
{
    export class Query {
        public ID: KnockoutObservable<number>;
        public Name: KnockoutObservable<string>;
        public RootTargetID: KnockoutObservable<number>;
        public RootTarget: KnockoutObservable<QueryTarget>;

        constructor(json: any) {
            this.ID = ko.observable<number>(0);
            this.Name = ko.observable<string>();
            this.RootTargetID = ko.observable<number>();
            this.RootTarget = ko.observable<QueryTarget>();

            var mapping = {
                'RootTarget': {
                    create: function (args) {
                        return new QueryTarget(args.data, null);
                    }
                }
            };

            ko.mapping.fromJS(json, mapping, this);

        }
    }

    export class QueryTarget {
        public ID: KnockoutObservable<number>;
        public Name: KnockoutObservable<string>;
        public ParentID: KnockoutObservable<number>;
        public Children: KnockoutObservableArray<QueryTarget>;
        public Parent: KnockoutObservable<QueryTarget>;
        public Selects: KnockoutObservableArray<QuerySelect>;
        public FilterID: KnockoutObservable<number>;
        public Filter: KnockoutObservable<FilterClause>;

        constructor(json: any, parent: QueryTarget) {
            this.ID = ko.observable<number>(0);
            this.Name = ko.observable<string>();
            this.ParentID = ko.observable<number>(0);
            this.Children = ko.observableArray<QueryTarget>();
            this.Parent = ko.observable<QueryTarget>(parent);
            this.Selects = ko.observableArray<QuerySelect>();
            this.FilterID = ko.observable<number>(0);
            this.Filter = ko.observable<FilterClause>();

            var mapping = {
                'Children': {
                    create: function (args) {
                        return new QueryTarget(args.data, this);
                    }
                },
                'Selects': {
                    create: function (args) {
                        return new QuerySelect(args.data, this);
                    }
                },
                'Filter': {
                    create: function (args) {
                        return new FilterClause(args.data, null);
                    }
                }
            };

            ko.mapping.fromJS(json, mapping, this);
        }
    }

    export class QuerySelect {
        public ID: KnockoutObservable<number>;
        public Name: KnockoutObservable<string>;
        public Aggregation: KnockoutObservable<string>;
        public TargetID: KnockoutObservable<number>;
        public Target: KnockoutObservable<QueryTarget>;

        constructor(json: any, parent: QueryTarget) {
            this.ID = ko.observable<number>();
            this.Name = ko.observable<string>();
            this.Aggregation = ko.observable<string>();
            this.TargetID = ko.observable<number>();
            this.Target = ko.observable<QueryTarget>(parent);

            ko.mapping.fromJS(json, {}, this);
        }
    }

    export class FilterClause {
        public FilterClauseID: KnockoutObservable<number>;
        public Type: KnockoutObservable<string>;
        public Left: KnockoutObservable<string>;
        public Right: KnockoutObservable<string>;
        public ParentID: KnockoutObservable<number>;
        public Parent: KnockoutObservable<FilterClause>;
        public Children: KnockoutObservableArray<FilterClause>;

        constructor(json: any, parent: FilterClause) {
            this.FilterClauseID = ko.observable<number>();
            this.Type = ko.observable<string>();
            this.Left = ko.observable<string>();
            this.Right = ko.observable<string>();
            this.ParentID = ko.observable<number>();
            this.Parent = ko.observable<FilterClause>(parent);
            this.Children = ko.observableArray<FilterClause>();

            var mapping = {
                'Children': {
                    create: function (args) {
                        return new FilterClause(args.data, this);
                    }
                }
            };

            ko.mapping.fromJS(json, mapping, this);
        }
    }

    export class QueryModuleViewModel
    {
        public QueryObj: Query;

        constructor() {

            var json = {
                "ID": 2,
                "Name": "Northwind 2",
                "RootTargetID": 2,
                "RootTarget": {
                    "ID": 2,
                    "Name": "Customers",
                    "ParentID": null,
                    "FilterID": 2,
                    "Queries": [],
                    "Children": [],
                    "Parent": null,
                    "Selects": [
                        {
                            "ID": 3,
                            "Name": "CompanyName",
                            "Aggregation": "None",
                            "TargetID": 2,
                            "Target": null
                        },
                        {
                            "ID": 4,
                            "Name": "ContactName",
                            "Aggregation": "None",
                            "TargetID": 2,
                            "Target": null
                        }
                    ],
                    "Filter": {
                        "FilterClauseID": 2,
                        "Type": "AND",
                        "Left": null,
                        "Right": null,
                        "ParentID": null,
                        "QueryTargets": [],
                        "Parent": null,
                        "Children": [
                            {
                                "FilterClauseID": 3,
                                "Type": "NE",
                                "Left": "Country",
                                "Right": "Germany",
                                "ParentID": 2,
                                "QueryTargets": [],
                                "Parent": null,
                                "Children": []
                            },
                            {
                                "FilterClauseID": 4,
                                "Type": "NE",
                                "Left": "Country",
                                "Right": "Mexico",
                                "ParentID": 2,
                                "QueryTargets": [],
                                "Parent": null,
                                "Children": []
                            }
                        ]
                    }
                }
            }

            //$.getJSON("/api/query/2", null,
            //    d => {
            //        this.QueryObj = new Query(d);
            //    })

            this.QueryObj = new Query(json);
        }
    }
}

window.onload = () => {
    ko.applyBindings(new ViewModel.QueryModuleViewModel());
};

html绑定(bind)测试

<!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="query.js"></script>
    <!--<script src="my_js_query_test_all.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 and Filter data</p>
        <p>RootTarget.ID: <input data-bind="value: RootTarget().ID" /></p>
        <p>RootTarget.Name: <input data-bind="value: RootTarget().Name" /></p>

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

        <hr />
        <p>RootTarget.FilterClause Hierarcy</p>
        <div data-bind="with: RootTarget().Filter">
            <div data-bind="template: { name: 'QueryListClauseTemplate' }"></div>
        </div>

        <hr />
        <p>RootTarget.Selects</p>
        <div data-bind="foreach: { data: RootTarget().Selects }">
            <div data-bind="template: { name: 'QueryListSelectsTemplate' }"></div>
        </div>

    </div>

    <script type="text/template" id="QueryListClauseTemplate">

        <a title="FilterClause.Type" href="#" data-bind="text: Type" />

        <div data-bind="foreach: { data: Children }">
            <div data-bind="template: { name: 'QueryListClauseTemplate' }"></div>
        </div>
    </script>

    <script type="text/template" id="QueryListSelectsTemplate">
        <a title="Select.Name" href="#" data-bind="text: Name" />
    </script>

</body>
</html>

关于typescript - 将分层 JSON 映射到 TypeScript-KnockoutJS 类型对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17553963/

文章推荐： database - 从 execute(@query) 中选择 * 进入#table

文章推荐： mysql - SQL - 连接查询运行缓慢

Django:分层 URL
在 Django 中如何处理分层 URL？有什么最佳做法吗？例如。如果我有一个像 /blog/category1/category2/myblogentry 这样的 URL(使用例如 django-m
java - 分层/链接图
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，
r - 分层/多级饼图
有没有办法在 R 中创建这样的图表？以下是图表中显示的数据的摘录: df % group_by(Animal) %>% unite(col=Type, Animal:Name, sep =
R计算(分层)长数据集中的时间差
我一直在努力处理一些时间戳数据(直到现在才需要处理日期，并且它表明)。希望您能帮忙。我正在处理来自网站的数据，该数据显示每个客户 (ID) 各自的访问以及这些访问的时间戳。它的分组是指一个客户可能有
R计算(分层)长数据集中的时间差
我一直在努力处理一些时间戳数据(直到现在才需要处理日期，并且它表明)。希望您能帮忙。我正在处理来自网站的数据，该数据显示每个客户 (ID) 各自的访问以及这些访问的时间戳。它的分组是指一个客户可能有
MySQL 分层 IF 语句
我正在尝试完成这段代码: ORDER BY IF(j.groups IS NULL OR j.groups = '', IF(j.title IS NULL, i.title), j.groups)
iPhone View 分层
我有一个非常抽象的问题，因为我不确定如何提出它。我的其中一个 View 上有一个 UIImageView。我想让 ImageView 看起来“压入 super View ”。我不确定技术术语是什么，但
CSS 分层 Div
我希望 100% 宽的包含图像的 div 位于我的页面下方。在这些 div 之上，我想要一个 1210 像素宽的 div，我可以在其中放置我的内容。例子: http://mudchallenger.
javascript - Canvas 分层
我目前正在做一个类似于 http://www.beoplay.com/Products/BeoplayA9#under-the-hood 的元素使用 Javascript、HTML5 和 CSS3。我
android - 分层 ImageView
我想像上面那样创建图像缩略图..为此，我在下面创建了 XML activity_main.xml
java - 分层 MapReduce
我想知道是否可以定义一个分层 MapReduce 作业？。换句话说，我想要一个 map-reduce 作业，在 mapper 阶段将调用不同的 MapReduce 作业。可能吗？您对如何操作有什么建议
python - 传递类实例化(分层)
程序设计: A 类，实现较低级别的数据处理类 B-E，为 A 提供更高级别的接口(interface)以执行各种功能 F 类，它是根据用户输入与 B-E 交互的 UI 对象在任何给定时间只能有一个
sql - 分层 CTE，每级附加排序列
CTE 对我来说有点新，所以我希望有人可以帮助我编写的以下内容将采用类别表并从中构建层次结构以进行显示。我知道这种事情一直被问到，但我认为我的排序情况使它有点独特。我希望有一些使用 Hierarch
r - 如何在聚类分析(分层)中了解码信息？
我有关于的问题群在聚类分析(层次聚类)中。例如，这是的完全链式的树状图。虹膜数据集 . 我使用后 > table(cutree(hc, 3), iris$Species) 这是输出 : se
r - 分层(分类)数据到树状图
数据我有以下(简化的)数据集，我们称之为 df从现在开始: species rank value 1
delphi - 分层 Windows 的系统菜单？
Delphi 2009 中的分层窗口和系统菜单存在问题。也就是说，我们的分层窗口(没有边框)没有系统菜单。当我说系统菜单时，我指的是单击应用程序的图标、右键单击其标题栏或(在 Windows 7 中，
javascript - 分层 Canvas 元素
我正在制作一个 pototype HMTL5 Canvas 动画，该动画将导出到 Quicktime。我有一个动态生成的背景，上面有动态屏蔽的元素。我可以获取要制作的背景，并将其作为逐帧动画(pn
Java GUI 分层 Pane
好吧，我有一个打印棋盘的类和另一个打印国际象棋的类如何使用 LayeredPane 将它们合并在一起，如上面的示例图片所示？我一整天都在尝试，但似乎没有任何效果。我正在使用 JFrame 打印图片。
spring - Autowiring 分层 bean
这是我的场景。我有两个类(class) ClassA 和 ClassB。 B类继承A类。我在它们两个上使用@Component注释来使它们成为Spring bean。 @Component publ
clojure - 分层 leiningen 项目有优势吗？
这不是一道问题题，而是一道使用工具——leiningen——的题。在一个主项目下创建分层的 lein 项目是否有优势，如果有，优势是什么？如果我使用 lein new bene-cmp 创建一个项

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

typescript - 将分层 JSON 映射到 TypeScript-KnockoutJS 类型对象