Карта JSON данных из Web API нокаутировать

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

это HTML, где я связать данные, в основном я использую нокаутирующий виджет, поэтому ниже код находится в \ приложение \ виджеты \ расширитель \ 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 - галообразное значение в том же формате.

Когда я привязываю эти значения к моему аккордеонному управлению, «pagemodules» работает, а «модули» - нет. В чем проблема?

здесь образец данных в формате JSON с моей веб-API:

[{"$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}]}] 

EDIT: Вот что отличается, может быть что-то здесь не так. В «модули», которые получают из веб-апи обрабатываются таким образом:

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

Edit:

здесь некоторый код на том, как JSON используется Breeze, чтобы вернуть мне «unitofwork.usermodules. все()".

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

Я изменяю модель в веб-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; } 
}