Knockout.js 映射不绑定子模型答案

【问题标题】：Knockout.js mapping not binding child modelsKnockout.js 映射不绑定子模型
【发布时间】：2012-04-05 17:17:39
【问题描述】：

我遇到了 knockout.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' 尝试了这个，它在这个sn-p 中和'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);?

但是，传递给 InnerModel 的 parent 是 null，这就是我追求映射插件的全部原因。文档让我相信这应该通过options 参数传递给create 函数，但我得到了一个observable，其值为null。在这个方向上还有什么其他的指示吗？

【问题讨论】：

不幸的是，父母不会做你想做的事。在这种情况下，Parent 为您提供了新项目所属的数组，而不是包含该数组的对象。您需要自己创建父关联。像这样：jsfiddle.net/jearles/6Wx3s/5
你可以试试这个stackoverflow.com/questions/9951521/… 这解决了我的子父映射问题

标签： knockout.js knockout-mapping-plugin

【解决方案1】：

您没有将映射选项（定义如何映射内部）传递给 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/

【讨论】：

【解决方案2】：

前段时间我有一个非常相似的场景，请在此处查看问答：Map JSON data to Knockout observableArray with specific view model type

在我的示例中，我有一个 StateViewModel，其中包含一个填充有 2 个 CityViewModels 的 observableArray，每个 CityViewModel 包含一个填充有 2 个 StreetViewModels 的 observableArray。

然后我希望这个视图模型结构可以使用敲除的映射插件从我的分层 json 数据构建。

这个小提琴给出了答案：http://jsfiddle.net/KodeKreachor/pTEbA/2/

【讨论】：