Question

我对Knockout.js相对较新，对于创建视图模型有疑问。

我目前正在做的是：

viewModel = {

                Menu: ko.observableArray(ko.utils.parseJson(data)),

                editMenu: function (menu) {
                    ko.applyBindings(menu, document.getElementById("MenuCategories"));
                    $("#MenuCategories").bPopup();
                }

有多个功能，但试图保持简短。

我想要做的是使用映射插件，因为我使用的json数据包含对象数组，每个对象包含一个数组，该数组中的每个对象也包含一个数组。 JSON的样子：

[
  {
    "Id": 1,
    "Name": "Test 5",
    "Description": "Testing menu",
    "BeveragesMenu": false,
    "Active": true,
    "Categories": [
      {
        "Id": 1,
        "Name": "Test 1",
        "Active": true,
        "MenuItems": [
        {
          "Id": 1,
          "Name": "Food",
          "Description": "2 Eggs and Bread",
          "Price": 50,
          "DateBased": false,
          "PriceOnRequest": false,
          "DateFrom": null,
          "DateTo": null,
          "Active": true
        }
      ]
    },
    {
      "Id": 2,
      "Name": "Test 2",
      "Active": true,
      "MenuItems": [
        ]
     },
     {
       "Id": 1004,
       "Name": "test",
       "Active": true,
       "MenuItems": [
        ]
     },
     {
       "Id": 1005,
       "Name": "Test 4",
       "Active": true,
       "MenuItems": [
         ]
     }
   ]
 },
 {
   "Id": 92,
   "Name": "Test 4",
   "Description": "",
   "BeveragesMenu": false,
   "Active": false,
   "Categories": [
   {
     "Id": 1006,
     "Name": "Test 1",
     "Active": true,
     "MenuItems": [
     {
       "Name": "Test",
       "Description": "",
       "Price": "",
       "DateBased": false,
       "PriceOnRequest": false
      }
    ]
  }
]
},
{
"Id": 93,
"Name": "Test 6",
"Description": "",
"BeveragesMenu": false,
"Active": false,
"Categories": [

]
},
{
"Id": 94,
"Name": "Test 9",
"Description": "",
"BeveragesMenu": false,
"Active": false,
"Categories": [

]
},
{
  "Id": 95,
  "Name": "Test 20]",
  "Description": "",
  "BeveragesMenu": false,
  "Active": false,
  "Categories": [
  {
    "Id": 4,
    "Name": "Test 6666",
    "Active": true,
    "MenuItems": [

    ]
  }
]
},
{
  "Id": 96,
  "Name": "Test 444",
  "Description": "",
  "BeveragesMenu": false,
  "Active": false,
  "Categories": [
  {
    "Id": 3,
    "Name": "Test 555",
    "Active": true,
    "MenuItems": [

    ]
  },
  {
    "Id": 5,
    "Name": "Test 6666",
    "Active": true,
    "MenuItems": [

    ]
  },
  {
    "Id": 1003,
    "Name": "test 777",
    "Active": true,
    "MenuItems": [

    ]
  }
]
}
]

对于长JSON代码粘贴感到抱歉。

所以现在我在使用对象等更新数组中对象的某些部分时会遇到问题。

所以我教过映射插件可以解决我的问题，因为它创建所有数组作为observable，我假设这是我的问题。

所以我试过了：

viewModel = {
                Menu: ko.mapping.fromJSON(ko.utils.parseJson(data)),
                //Menu: ko.observableArray(ko.utils.parseJson(data)),

                editMenu: function (menu) {
                    ko.applyBindings(menu, document.getElementById("MenuCategories"));
                    $("#MenuCategories").bPopup();
                },

但是我的绑定工作都没有起作用，我似乎无法找到原因，对此事的任何建议或提示都将不胜感激。

这是我尝试过的所有事情的小提琴。 http://jsfiddle.net/armandvdwalt/pjJc2/3/

由于

Answer 1

试试这个fiddle，我改变了资源的顺序。您在knockout之前引用了映射插件，这会产生一个关于无法识别“ko”的脚本错误。此外，使用fromJSON时不需要使用ko.utils.parseJson，因为fromJSON需要JSON作为参数。

Knockout JS改变我的视图模型创建以使用映射插件

1 个答案: