2012-07-10 120 views
0

我對Knockout.js相對較新,並且對創建視圖模型有疑問。Knockout JS將我的viewmodel創建更改爲使用映射pulgin

什麼我目前做的是:

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代碼粘貼。

所以,現在我遇到的問題withing對象等陣列內的更新對象的某些部分時

所以我教導說,因爲它創造了所有的數組作爲觀察的映射插件可以解決我的問題,我假設那是我的問題。

所以,我想:

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/

感謝

回答

0

試試這個fiddle,我換了資源的順序。你在knockout之前引用了映射插件,它產生了一個關於不識別「ko」的腳本錯誤。此外,使用fromJSON時,不需要使用ko.utils.parseJson,因爲fromJSON需要JSON作爲參數。

相關問題