将 JSON 数据从 Web API 映射到 KnockOut答案

【问题标题】：Map JSON data from Web API to KnockOut将 JSON 数据从 Web API 映射到 KnockOut
【发布时间】：2015-02-14 06:42:20
【问题描述】：

我有一个数组如下：

 modules: ko.observableArray(),
    pagemodules: ko.observableArray([
        {
            id: "1", name: "name1", description: "", icon: "fa fa-facebook-square", page: "page-8", active: false, children:
            [
                { id: "1.1", name: "name1-1", description: "", icon: "fa fa-film", page: "/home/index", active: false },
                { id: "1.2", name: "name1-2", description: "", icon: "", page: "/home/help", active: false },
                { id: "1.3", name: "name1-2", description: "", icon: "", page: "page-8", active: false },
                { id: "1.4", name: "name1-3", description: "", icon: "", page: "page-8", active: false },
                { id: "1.5", name: "name1-4", description: "", icon: "", page: "page-8", active: false },
                { id: "1.6", name: "name1-5", description: "", icon: "", page: "page-8", active: false }
            ]
        },
    {
        id: "2", name: "name2", description: "", icon: "fa fa-search", page: "/home/about", active: false, children: []
    },
    {
        id: "3", name: "name3", description: "", icon: "fa fa-heart", page: "page-8", active: false, children: 
            [
                { id: "3.1", name: "name3-1", description: "", icon: "", page: "page-8", active: false },
                { id: "3.2", name: "name3-2", description: "", icon: "", page: "page-8", active: false },
                { id: "3.3", name: "name3-3", description: "", icon: "", page: "page-8", active: false },
                { id: "3.4", name: "name3-4", description: "", icon: "", page: "page-8", active: false }
            ] 
    },
    {
        id: "4", name: "name4", description: "", icon: "fa fa-envelope", page: "page-8", active: false, children: []
    },
    {
        id: "5", name: "name3", description: "", icon: "fa fa-star", page: "page-8", active: false, children: 
            [
                { id: "5.1", name: "name5-1", description: "", icon: "", page: "page-8", active: false },
                { id: "5.2", name: "name5-2", description: "", page: "page-8", active: false },
                { id: "5.3", name: "name5-3", description: "", page: "page-8", active: false },
                { id: "5.4", name: "name5-4", description: "", page: "page-8", active: false }
            ]
    },
    {
        id: "6", name: "name6", description: "", page: "page-8", active: false, children: 
            [
                { id: "6.1", name: "name6-1", description: "", page: "page-8", active: false },
                { id: "6.2", name: "name6-2", description: "", page: "page-8", active: false },
                { id: "6.3", name: "name6-3", description: "", page: "page-8", active: false },
                { id: "6.4", name: "name6-4", description: "", page: "page-8", active: false }
            ]
    },
    {
        id: "7", name: "name7", description: "", page: "page-8", active: false, children: 
            [
                { id: "7.1", name: "name7-1", description: "", page: "page-8", active: false },
                { id: "7.2", name: "name7-2", description: "", page: "page-8", active: false },
                { id: "7.3", name: "name7-3", description: "", page: "page-8", active: false },
                { id: "7.4", name: "name7-4", description: "", page: "page-8", active: false }
            ]
    },
    {
        id: "8", name: "name8", description: "", page: "page-8", active: false, children: 
            [
                { id: "8.1", name: "name8-1", description: "", page: "page-8.1", active: false },
                { id: "8.2", name: "name8-2", description: "", page: "page-8.2", active: false },
                { id: "8.3", name: "name8-3", description: "", page: "page-8.3", active: false },
                { id: "8.4", name: "name8-4", description: "", page: "page-8.4", active: false }
            ]
    }
    ]),

这是我绑定数据的 HTML，基本上我使用的是敲除小部件，所以下面的代码在 \app\widgets\expander\view.html 中

<div class="panel-group" id="accordion" data-bind="foreach: { data: settings.items}">
<div class="panel panel-primary">
    <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion" data-bind="attr: { href:'#collapse'+$data.id}">
        <h4 class="panel-title accordion-toggle">

            <!--<span data-bind="css: $data.icon"></span>-->

            <a style="padding-left: 10px;" class="collapsed" data-bind="html: $data.name"></a>

        </h4>
    </div>
    <div data-bind="attr: { id:'collapse'+$data.id}" class="panel-collapse collapse">
        <div class="list-group" data-bind="foreach: $data.children">
            <div class="list-group-item">
                <span data-bind="css: $data.icon"></span>
                <a style="padding-left: 10px;" href="#" data-bind="html: $data.id+'.'+$data.name"></a>
            </div>
        </div>
    </div>
</div>

这就是我使用小部件的方式

<div data-bind="expander: {items:modules}"></div>

modules - 从 WebAPI 获取数据 pagemodules - 具有相同格式的硬编码值。

当我将这些值绑定到手风琴控件时，“pagemodules”有效，而“modules”无效。这里有什么问题？

这是来自我的 Web API 的示例 JSON 数据：

[{"$id":"1","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"e8c8650d-2756-4abc-82ae-d86a62e5fbc6","Name":"Page1","Description":null,"Icon":null,"Children":[{"$id":"2","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"2e7a6565-d177-4630-bb77-07f58dc6e7f9","Name":"Page1.2","Description":null,"Icon":null,"Children":null},{"$id":"3","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"64248745-5a17-496b-97d4-4fbdae5a2f92","Name":"Page1.1","Description":null,"Icon":null,"Children":null},{"$id":"4","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"b065d3f3-5dd6-4adb-918d-bb07f7e5c4e2","Name":"Page1.3","Description":null,"Icon":null,"Children":null},{"$id":"5","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"11da74d4-403d-41ef-a870-bc48da7b1dc7","Name":"Page1.5","Description":null,"Icon":null,"Children":null},{"$id":"6","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"18271cf5-5e5e-401d-96ca-ce5214b98049","Name":"Page1.4","Description":null,"Icon":null,"Children":null}]},{"$id":"7","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"23ddb73c-4319-48e0-b9f7-f96e10b76306","Name":"Page2","Description":null,"Icon":null,"Children":[{"$id":"8","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"5edab097-58fd-41f8-b12f-202a76c787ea","Name":"Page2.3","Description":null,"Icon":null,"Children":null},{"$id":"9","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"139cb94f-6dcc-408f-ac69-5ab0ff1555ed","Name":"Page2.1","Description":null,"Icon":null,"Children":null},{"$id":"10","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"745532d0-9ea1-4462-b7e2-b9189cc2da72","Name":"Page2.2","Description":null,"Icon":null,"Children":null}]},{"$id":"11","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"3042928a-a01f-459e-bd84-f6a9c19f30b8","Name":"Page3","Description":null,"Icon":null,"Children":[{"$id":"12","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"21336001-d0c2-4066-ad7a-24c1291dfd53","Name":"Page3.1","Description":null,"Icon":null,"Children":null},{"$id":"13","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"9d654b2c-7f1b-4e48-94d4-42fc50d4a6a6","Name":"Page3.3","Description":null,"Icon":null,"Children":null},{"$id":"14","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"06ba9de8-97c9-4736-a83a-56a12fd5dc7e","Name":"Page3.2","Description":null,"Icon":null,"Children":null},{"$id":"15","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"e3e98162-599b-4233-aa5d-6cb6fd1a4d50","Name":"Page3.4","Description":null,"Icon":null,"Children":null},{"$id":"16","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"609376d4-a354-4c52-8512-a98d039a68ed","Name":"Page3.5","Description":null,"Icon":null,"Children":null},{"$id":"17","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"2b44d16c-148e-4a51-b728-cb3dd3d72b86","Name":"Page3.7","Description":null,"Icon":null,"Children":null},{"$id":"18","$type":"MyApp.Domain.Model.Module, MyApp.Domain","ModuleId":"0b6f3c82-fdfd-46dc-8d86-d98a4d00f530","Name":"Page3.6","Description":null,"Icon":null,"Children":null}]}]

编辑：这是不同的地方，也许这里有问题。从 web api 获取的“模块”是这样处理的：

 attached: function () {
        var self = this;
        var modules = unitofwork.usermodules.all()
                            .then(function (modules) {
                                self.modules(modules);
                                //console.log(JSON.stringify(modules, undefined, 2));
                                console.log(modules);
                            }
        );

        return Q.all([modules]).fail(self.handleError);
    },

编辑：

这里是一些关于 Breeze 如何使用 JSON 向我返回“unitofwork.usermodules.all()”的代码。

var query = breeze.EntityQuery
                .from(resourceName)
                .orderBy("name asc")
                .expand("Children");

            return executeQuery(query);

function extendModule(metadataStore) {
        var moduleCtor = function () {
            this.moduleId = ko.observable(breeze.core.getUuid());

        };

        metadataStore.registerEntityTypeCtor('Module', moduleCtor);
    };

我觉得上面的代码可能有问题？

【问题讨论】：

是否可以在 jsfiddle.net 中添加一个工作示例并分享链接？
嗨，Sherin，我知道这会有所帮助。试图分叉一些代码并应用我的。但它有点复杂。基本上我知道问题出在哪里。我的 webAPI 正确返回 JSON，但 Breeze 实体管理器可能是问题所在。
如果代码能得到更多的修剪，这将有很大帮助，就像@SherinMathew 所说的那样，如果它是一个实际的复制品。如果我们无法重现该场景，我们将很难为您提供帮助（尤其是有这么多几乎不相关的代码）。 GL！
只需检查将 moduleId 设置为新的 uuid 不会覆盖来自 webApi 的 moduleId。

标签： javascript jquery json knockout.js asp.net-web-api

【解决方案1】：

我更改了 Web API 中的模型，解决了问题。这是新模型。好像我错过了“ParentModuleId”作为孩子的外键。感谢所有的帮助。 :)

[DataContract(IsReference = true)]
public class Module
{
    [Key]
    [DataMember]
    public Guid ModuleId { get; set; }

    [Required]
    [StringLength(100)]
    [DataMember]
    public string Name { get; set; }

    [StringLength(100)]
    [DataMember]
    public string Description { get; set; }

    [StringLength(50)]
    [DataMember]
    public string Icon { get; set; }

    [DataMember]
    public Guid? ParentModuleId { get; set; }

    [ForeignKey("ParentModuleId")]
    [DataMember]
    public virtual ICollection<Module> Children { get; set; }
}

【讨论】：