0

私は比較的新しく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 コードの貼り付けで申し訳ありません。

そのため、オブジェクトなどを含む配列内のオブジェクトの特定の部分を更新するときに問題が発生しています。

だから私はマッピングプラグインがすべての配列を観測可能として作成するので私の問題を解決するかもしれないと教えました、そして私はそれが私の問題であると仮定しています.

だから私は試しました：

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/

ありがとう

4

1 に答える 1

0

このフィドルを試してみてください。リソースの順序を切り替えました。ノックアウトの前にマッピング プラグインを参照していたため、「ko」が認識されないというスクリプト エラーが発生していました。また、fromJSON は引数として JSON を想定しているため、fromJSON を使用する場合は ko.utils.parseJson を使用する必要はありません。

于 2012-07-10T12:52:55.947 に答える