Knockout.js와 매핑 플러그인이 깊은 번역이 아닙니다

Question

json 객체를 사용하여 메뉴와 탐색 경로를 처리합니다. 이제 아래에서 처음 두 "내비게이션"노드를 관찰 할 수 있지만 마지막 노드는 볼 수 없습니다. 그것은 어떤 이유로 정규 배열 일뿐입니다. 매핑 플러그인이 객체를 깊이 복제하지 않았습니까?

방화범 출력 :

app.viewModel.members.layout().Navigation()[2].Navigation()[1].Navigation() <-- errors 

초기화 :

app.viewModel.members.layout(ko.mapping.fromJS(json.Layout)); 

json.Layout JSON :

{ 
    "Layout": { 
    "Navigation": [ 
     { 
     "ID": "Dashboard", 
     "Type": "Menu", 
     "Route": "dashboard", 
     "Title": "Dashboard" 
     }, 
     { 
     "ID": "Events", 
     "Type": "Menu", 
     "Route": "events", 
     "Title": "Events", 
     "Navigation": [ 
      { 
      "ID": "AddEvent", 
      "Type": "Action", 
      "Route": "events/event", 
      "Title": "Add Event", 
      "Label": "+ Add Event", 
      "Order": "1" 
      }, 
      { 
      "ID": "EditEvent", 
      "Type": "Item", 
      "Route": "events/event", 
      "Parameters": "eventid", 
      "Title": "Edit Event", 
      "Navigation": [ 
       { 
       "ID": "EventGymCourts", 
       "Type": "Menu", 
       "Route": "events/event/gymcourts", 
       "Title": "Locations", 
       "Parameters": "eventid", 
       "Navigation": [ 
        { 
        "ID": "AddEventGymCourt", 
        "Type": "Action", 
        "Route": "events/event/gymcourts/gymcourt", 
        "Title": "Add Location", 
        "Parameters": "eventid", 
        "Label": "+ Add Location", 
        "Order": "1" 
        }, 
        { 
        "ID": "EditEventGymCourt", 
        "Type": "Item", 
        "Route": "events/event/gymcourts/gymcourt", 
        "Parameters": "eventid,gymcourtid", 
        "Title": "Edit Location" 
        } 
       ] 
       }, 
       { 
       "ID": "Teams", 
       "Type": "Menu", 
       "Route": "events/event/teams", 
       "Title": "Teams", 
       "Parameters": "eventid", 
       "Navigation": [ 
        { 
        "ID": "AddTeam", 
        "Type": "Action", 
        "Route": "events/event/teams/team", 
        "Title": "Add Team", 
        "Parameters": "eventid", 
        "Label": "+ Add Team", 
        "Order": "1" 
        }, 
        { 
        "ID": "EditTeam", 
        "Type": "Item", 
        "Route": "events/event/teams/team", 
        "Parameters": "eventid,teamid", 
        "Title": "Edit Team" 
        } 
       ] 
       }, 
       { 
       "ID": "Pools", 
       "Type": "Menu", 
       "Route": "events/event/pools", 
       "Title": "Pools", 
       "Parameters": "eventid", 
       "Navigation": [ 
        { 
        "ID": "AddPool", 
        "Type": "Action", 
        "Route": "events/event/pools/pool", 
        "Title": "Add Pool", 
        "Parameters": "eventid", 
        "Label": "+ Add Pool", 
        "Order": "1" 
        }, 
        { 
        "ID": "EditPool", 
        "Type": "Item", 
        "Route": "events/event/pools/pool", 
        "Parameters": "eventid,poolid", 
        "Title": "Edit Pool" 
        } 
       ] 
       }, 
       { 
       "ID": "Brackets", 
       "Type": "Menu", 
       "Route": "events/event/brackets", 
       "Title": "Brackets", 
       "Parameters": "eventid", 
       "Navigation": [ 
        { 
        "ID": "AddBracket", 
        "Type": "Action", 
        "Route": "events/event/brackets/bracket", 
        "Title": "Add Bracket", 
        "Parameters": "eventid", 
        "Label": "+ Add Bracket", 
        "Order": "1" 
        }, 
        { 
        "ID": "EditBracket", 
        "Type": "Item", 
        "Route": "events/event/brackets/bracket", 
        "Parameters": "eventid,bracketid", 
        "Title": "Edit Bracket" 
        } 
       ] 
       } 
      ] 
      } 
     ] 
     }, 
     { 
     "ID": "Gyms", 
     "Type": "Menu", 
     "Route": "gyms", 
     "Title": "Locations", 
     "Navigation": [ 
      { 
      "ID": "AddGym", 
      "Type": "Action", 
      "Route": "gyms/gym", 
      "Title": "Add Location", 
      "Label": "+ Add Gym", 
      "Order": "1" 
      }, 
      { 
      "ID": "EditGym", 
      "Type": "Item", 
      "Route": "gyms/gym", 
      "Parameters": "gymid", 
      "Title": "Edit Location", 
      "Navigation": { 
       "ID": "EditMap", 
       "Type": "Menu", 
       "Route": "gyms/gym/map", 
       "Parameters": "gymid", 
       "Title": "Map" 
      } 
      } 
     ] 
     } 
    ] 
    } 
} 

업데이트 :

"탐색"에는 하나의 노드 만 있기 때문에 모양이 더 가까워 보이며 다른 노드와 마찬가지로 배열이 아닌 하나의 객체가됩니다. 어떻게 해결할 수 있을까요? 매핑 플러그인에서 만들기 사용 하시겠습니까?

Answer 1

매핑 플러그인에서 create 메소드를 사용했습니다.

var mapping = { 
         'Navigation': { 
          create: function (options) { 


           if (options.data.Navigation) { 
            if (options.data.Navigation instanceof Array) { 
             options.data = ko.mapping.fromJS(options.data, mapping); 
            } 
            else{ 
             options.data.Navigation = [options.data.Navigation]; 
            } 
           } 

           return ko.mapping.fromJS(options.data); 
          } 
         } 
        }; 

        app.viewModel.members.layout(ko.mapping.fromJS(json.Layout, mapping));