javascript - 将 JSON 数据从 Web API 映射到 KnockOut

Question

我有一个数组如下:

 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 }
            ]
    }
    ]),

这是我绑定(bind)数据的 HTML，基本上我使用的是 knockout 小部件，因此下面的代码位于\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>

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

当我将这些值绑定(bind)到我的 Accordion 控件时，“pagemodules”可以工作，而“modules”则不能。这里有什么问题吗？

这是来 self 的 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);
    };

我认为上面的代码可能有问题？

Answer 1

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

[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; }
}