Knockout.js和映射插件沒有深度翻譯

Question

我使用json對象來處理我的菜單和麪包屑。現在在下面你可以看到前兩個「導航」節點是可觀察的，但最後一個不是。由於某種原因，它只是一個常規數組。映射插件不能深入克隆該對象嗎？

Firebug的輸出：

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