지도 JSON 데이터 내가 다음과 같이 배열을 가지고

Question

녹아웃 \

응용 프로그램 \ 위젯 \ 확장 \ 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 - 형식이 동일한 harcoded 값입니다.

이러한 값을 내 accordion 컨트롤에 바인딩하면 "모듈"은 작동하지 않지만 "페이지 매 모듈"은 작동합니다. 여기에 어떤 문제가 있습니까? 여기 어쩌면, 여기에 뭔가 문제가 다른 것입니다 :

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

편집 :

여기 내 웹 API에서 샘플 JSON 데이터입니다. 웹 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); 
    }, 

편집 :

여기

은 JSON이 나에게 "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; } 
}