Knockout.js 映射不绑定(bind)子模型

Question

我遇到了 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);

(这是我可以为此做的一个小 repo 。 fiddle 在这里可用: 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);?

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

Answer 1

您没有将映射选项(定义如何映射内部)传递给 OuterModel 映射调用。

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

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

编辑:更新 fiddle 以显示 parent 的手动附件:

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