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（）。

好的：看看这个jsFiddle是否可以帮助你：http://jsfiddle.net/8QVe6/

请注意，我将属性设置为camelCased（即managementModule）。

Knockout JS：使用预定义的对象构建viewModel

1 个答案: