6

ノックアウト js とマッピング プラグインに問題があり、ソース データに子配列のモデルが作成されません

var data = {
    outer: [
        {
        'id': 1,
        name: 'test outer',
        inner: [{
            'id': 1,
            name: 'test inner'}]}]
};

function OuterModel(data) {
    var self = this;
    ko.mapping.fromJS(data, {}, this);

    self.fullText = ko.computed(function() {
        return self.id() + ". " + self.name();
    });
}

function InnerModel(data, parent) {
    var self = this;
    ko.mapping.fromJS(data, {}, this);

    self.fullText = ko.computed(function() {
        return self.id() + ". " + self.name() + "(" + parent + ")";
    });
}

function PageModel() {
    var self = this;
    this.data = null;
}

var mapping = {
    'outer': {
        key: function(data) {
            return ko.utils.unwrapObservable(data.id);
        },
        create: function(options) {
            var thisModel = new OuterModel(options.data);
            return thisModel;
        }
    },
    'inner': {
        key: function(data) {
            return ko.utils.unwrapObservable(data.id);
        },
        create: function(options) {
            var thisModel = new InnerModel(options.data);
            return thisModel;
        }
    }
};

var model = new PageModel();
model.data = ko.mapping.fromJS(data, mapping);

(これは私が作成できる小さなレポです。フィドルはここで入手できます: http://jsfiddle.net/msieker/6Wx3s/ )

つまり、InnerModel コンストラクターは呼び出されません。このスニペットとマッピング'InnerModel'内の両方でこれを試しました。'inner'私が見たほとんどの説明から、これはうまくいくはずですが、明らかに何かが欠けています。

誰でも私を正しい方向に向けることができるこれに関する経験がありますか?

編集: @John Earles の回答に基づいて、これを必要なものに少し近づけました。

var data = {
    outer: [
        {
        'id': 1,
        name: 'test outer',
        inner: [{
            'id': 1,
            name: 'test inner'}]}]
};

var outerMapping = {
    'outer': {
        key: function(data) {
            return ko.utils.unwrapObservable(data.id);
        },
        create: function(options) {
            var thisModel = new OuterModel(options.data);
            return thisModel;
        }
    }
};

function OuterModel(data) {
    var self = this;
    ko.mapping.fromJS(data, innerMapping, this);

    self.fullText = ko.computed(function() {
        return self.id() + ". " + self.name();
    });
}

var innerMapping = {
    'inner': {
        key: function(data) {
            return ko.utils.unwrapObservable(data.id);
        },
        create: function(options) {
            console.log(options);
            var thisModel = new InnerModel(options.data, options.parent());
            return thisModel;
        }
    }
};

function InnerModel(data, parent) {
    var self = this;
    ko.mapping.fromJS(data, {}, this);

    self.fullText = ko.computed(function() {
        return self.id() + ". " + self.name() + "(" + parent + ")";
    });
}

function PageModel() {
    var self = this;
    this.data = null;
}

var model = new PageModel();
model.data = ko.mapping.fromJS(data, outerMapping);
ko.applyBindings(model);?

ただし、parentInnerModel に渡されるのは ですnull。これを取得することが、マッピング プラグインを追求している理由です。optionsドキュメントは、これがパラメーターで関数に渡される必要があると私に信じさせますcreateが、代わりにobservable値がnull. この方向への追加の指針はありますか?

4

2 に答える 2

2

マッピング オプション (内部をマッピングする方法を定義する) を OuterModel マッピング呼び出しに渡しません。

function OuterModel(data) {
    var self = this;
    ko.mapping.fromJS(data, mapping, this);

    self.fullText = ko.computed(function() {
        return self.id() + ". " + self.name();
    });
}

編集:親の手動接続を表示するようにフィドルを更新しました:

http://jsfiddle.net/jearles/6Wx3s/5/

于 2012-03-21T10:10:39.610 に答える
1

しばらく前に非常によく似たシナリオがありました。ここで Q & A を確認してください:特定のビュー モデル タイプで JSON データを Knockout observableArray にマップする

私の例では、2 つの CityViewModel が取り込まれた observableArray を含む StateViewModel があり、各 CityViewModel には 2 つの StreetViewModel が取り込まれた observableArray が含まれています。

次に、ノックアウトのマッピング プラグインを使用して、階層的な json データからこのビュー モデル構造を構築したいと考えました。

このフィドルは答えを導き出します: http://jsfiddle.net/KodeKreachor/pTEbA/2/

于 2012-04-03T21:59:14.160 に答える