js和映射插件未深度翻译

js和映射插件未深度翻译

本文介绍了Knockout.js和映射插件未深度翻译的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用json对象处理菜单和面包屑.现在在下面,您可以看到前两个导航"节点是可观察到的,但最后一个不是.由于某种原因,它只是一个常规数组.映射插件不会深度克隆对象吗?

I use a json object to handle my menus and breadcrumbs. Now below you can see that the first two "Navigation" nodes are observable, but the last one isn't. It is just a regular array for some reason. Does the mapping plugin not deep clone the object?

Firebug输出:

Firebug output:

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

初始化:

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

json.Layout JSON:

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"
            }
          }
        ]
      }
    ]
  }
}

更新:

由于导航"只有一个节点,因此使它看起来像一个对象,而不像其他数组那样使它成为一个对象.我该如何补救?在映射插件中使用create吗?

Looking closer it looks like since that "Navigation" has only one node, it makes it one object and not an array like the others. How could I remedy this? Using create in the mapping plugin?

推荐答案

好吧,我在映射插件中使用了create方法.

Well I used the create method in the mapping plugin.

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

这篇关于Knockout.js和映射插件未深度翻译的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-15 20:48