0

独自のプロトタイプ タイプでマッピング プラグインを使用します

JSON から

var mapping = {
    Children: {
        create: function(options) {
            return ko.mapping.fromJS(options.data, {}, new ChildViewModel());
        }
    }
};

$.getJSON(url, null, function (data) {
    var model = ko.mapping.fromJS(data, mapping, new RootViewModel());
    ko.applyBindings(model);
});

JSONへ

var data = ko.mapping.toJSON(this);

json データには元の子アイテムがあり、新しく追加されたアイテムは単なる空の json オブジェクトです{}

ルートモデルからこのような子アイテムを追加します

addChild: function () {
    this.Children.push(new ChildViewModel());
}

どうしたの？

更新: 私の問題を再現するフィドル

http://jsfiddle.net/pDnnM/

Update2 いくつかのGoogleの調査結果がまだサイコロがない後、別のアプローチをテストしました:/

http://jsfiddle.net/5UDhB/

回答後に更新

メイン モデルと子モデルの両方にデータがあり、マッピングしてから JSON にシリアル化する必要があります

http://jsfiddle.net/699YH/

メインモデルと子の両方をマップする必要がありますが、これは不可能でしょうか?

CRUD 操作をどのように更新しますか? Stackoverflow の Google と Madcapnmckay にさらに感謝します。最終的な問題が 1 つあります。この後は、現在手動​​マッパーで行っているマッピング プラグインですべてを実行できると思います (まもなく 100 を超えるビュー モデルに到達するため、手動マッパーは私たちを苛立たせ始めています)。

マッパーが CRUD シナリオを処理する方法を見つけられませんでした。ビューをロードしたときに 5 つのアイテムがあり、これらには ID があり、次に 2 つのアイテムを追加すると、これらは ID: 0 を取得します。次に、VM 全体を保存してバックエンドに送信します。これらの新しい行は新しい ID を取得します。更新時にマッパープラグインを呼び出しますが、失敗しますWhen calling ko.update*, the key '0' was not unique!

http://jsfiddle.net/3bWcF/2/

あなたはオフコースを行うことができます

this.items.remove(function(item) { return item.id() == 0;});

マッパーを呼び出す直前ですが、マッパーはあなたのためにそれを行うことができますか? ありがとう！

4

1 に答える 1

1

問題は、動的に追加された子がマッピング プラグインによって作成されないことです。このようにオブジェクト内のマッピングを移動することで、これを解決してコードをクリーンアップできます。

http://jsfiddle.net/madcapnmckay/3bWcF/1/

var mappings = {
    items: {
        key: function(data) {
            return data.id;
        },
        create: function(options) {
            return new ChildViewModel(options.data)
        }
    }
};    

var counter = 5;

ViewModel = function(config) {
    ko.mapping.fromJS(config, mappings, this);   

    this.json = ko.computed(function() {
        return ko.mapping.toJSON(this, { ignore: [ "json" ] });
    }, this);
};

ViewModel.prototype = {
    add: function() {
        this.items.push(new ChildViewModel({ 
            id: counter++, 
            name: "new row" + counter 
        }));
    }
};

ChildViewModel = function(config) {
    ko.mapping.fromJS(config, {}, this);
};

ko.applyBindings(new ViewModel(data));

お役に立てれば。

于 2012-05-31T21:32:07.357 に答える