1

同じ構造の複数の繰り返しセクションで構成される大きなXMLファイル（JSONに変換）があります。myAttributes各セクションには、セクション固有のプロパティに加えて、同じ構造の属性のセットがあります（XMLからJSONへの変換により、すべての属性がと呼ばれるオブジェクトに移動されます）。私の目的は、既存の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最後の1つmyViewModel.Alert.myAttributes.Nameを結合します。

私は何が間違っているのですか？複数のネストされたオブジェクトからviewModelを組み立てるにはどうすればよいですか？

更新：私が間違ってバインドしていたことに気づきましたが、それでもたくさんの myViewModel.ManagementModuleName.myAttributes.Name最後の1つ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>
4

1 に答える 1

1

手始めに、observableArrayを私たちが観察可能であるかのように参照しています。どこかにdata-bind=foreach：Alarms（）が必要です。

OK：このjsFiddleが役立つかどうかを確認してください：http：//jsfiddle.net/8QVe6/

プロパティをcamelCased（つまり、managementModule）にしたことに注意してください。

于 2012-10-12T00:49:25.010 に答える