Knockout JS：使用預定義的對象構建視圖模型

Question

我有一個由相同結構的多個重複節組成的大型XML文件（轉換爲JSON）。除了特定部分的屬性之外，每個部分都有一組相同結構的屬性（XML到JSON的轉換將所有屬性移動到名爲myAttributes的對象中）。我的目標是能夠讀取現有的XML並生成新的XML。

我試圖使用映射插件，它只允許我讀取XML，不生成它，再加上對象元素之間存在多個相互依賴關係。

我認爲解決此問題的最佳方法是預先定義一組匹配XML小部分的對象。將這些對象組裝在一起時，將能夠生成我需要的XML結構。通過這種方式，我可以通過從XML生成的JSON數組循環，使用適當的數據填充預先定義的對象，並將它們附加到我的viewModel（可以說10個警報，3個動作，6個度量分組等等）。從預定義對象生成XML也應該很容易。

但是，由於我對JavaScrip和KnockoutJS都沒有經驗，所以我很難搞清楚這一點。

// Main Top Level Management Module Object 
function ManagementModule(data) { 
    this.myAttributes = new Object(); 
    this.myAttributes.Name = ko.observable(data.Name); 
    this.myAttributes.IsActive = ko.observable(data.IsActive); 
    this.myAttributes.DescriptionContentType = ko.observable(data.DescriptionContentType); 
    this.myAttributes.Description = ko.observable(data.Description); 
    // There are other object specific properties, but I omitted them for now 
} 

// New Alert Object. It will be deep in the hierarchy of the main top level object 
// but for now i will make it top level for test purposes. 
function Alert(data) { 
    this.myAttributes = new Object(); 
    this.myAttributes.Name = ko.observable(data.Name); 
    this.myAttributes.IsActive = ko.observable(data.IsActive); 
    this.myAttributes.DescriptionContentType = ko.observable(data.DescriptionContentType); 
    this.myAttributes.Description = ko.observable(data.Description); 
    // There are other object specific properties, but I omitted them for now 
} 

// View Model 
function myModel() { 
    var self = this; 
    self.ManagementModule = ko.observableArray(); 
    self.Alerts = ko.observableArray(); 
}; 
var myViewModel = new myModel(); 

然後，我遍歷我的JSON，並嘗試添加的東西向視圖模型......這是哪裏的東西不工作的權利。也許是因爲我誤解的對象...

$.getJSON("/getXML", function (data) { 

    for (var key in data) { 
     // Do something here 
    } 

    // This seems to work OK. There is only 1 so, I just 
    // set it. 
    myViewModel.ManagementModule(data['myAttributes']); 

    for (var i = 0; i < data['DataGroups']['DataGroup'].length; i++) { 
     var current = data['DataGroups']['DataGroup'][i]; 
     if(current['AlertBase']) { 

      var AlertBase = current['AlertBase']; 

      // There are multiple Alarts 
      for (var i = 0; i < AlertBase.length; i++) { 
        myViewModel.Alerts.push(Alert(AlertBase[i].myAttributes)); 
      } 
     } 

    }; 
    ko.applyBindings(myViewModel); 

}); 

這勝負的工程....當我嘗試綁定到它

<div data-bind="text: Alerts.myAttributes.Name"></div> 
<div data-bind="text: ManagementModule.myAttributes.Name"></div> 

它無法正常工作。如果我綁定是這樣的：

<div data-bind="text: myAttributes.Name"></div> 

它同時輸出，myViewModel.ManagementModuleName.myAttributes.Name和最後一個myViewModel.Alert.myAttributes.Name連接在一起。

我在做什麼錯？我如何從多個嵌套對象中組裝一個viewModel？

更新：只是意識到我是錯誤的結合，但仍然產生了一堆的 myViewModel.ManagementModuleName.myAttributes.Name和最後一個myViewModel.Alert.myAttributes.Name連接在一起

<div data-bind="foreach: Alerts()"> 
    <div data-bind="text: myAttributes.Name"></div> 
</div> 

我想我解決它......

myViewModel = new ManagementModule(data['myAttributes']); 

myViewModel.Alerts = ko.observableArray(); 
myViewModel.Alerts.push(new Alert(AlertBase[i].myAttributes)); 


<div data-bind="text: myAttributes.Name"></div><br /> 
<div data-bind="foreach: Alerts()"> 
    <div data-bind="text: myAttributes.Name"></div> 
</div> 

Answer 1

對於初學者，您引用observableArrays就好像我們可以觀察。你需要一個data-bind = foreach：Alarms（）在那裏。

OK：看是否有此的jsfiddle幫助你：http://jsfiddle.net/8QVe6/

注意，我做了駝峯性質（即managementModule）。