子对象的 KO 映射问题答案

【问题标题】：KO Mapping issue with child objects子对象的 KO 映射问题
【发布时间】：2013-09-10 08:53:09
【问题描述】：

我从服务器得到以下数据：

var data =   [{ id: 0, child: { prop1 : 'a', prop2 : 'b' } }   //Child object has data
             ,{ id: 0, child: null } ];    // Child object is null

我在使用敲除映射插件映射数据后遇到了一些问题。问题是内部 child 对象不是同一类型。

执行后：

ko.mapping.fromJS(data, viewModel.data);

我知道第一个对象具有 child 类型的 Object 属性和数据。然而，第二个对象有一个 child 类型的 Observable 属性，当它展开时返回 null。

如何在这两种情况下使对象具有相同的类型，即使一个具有值而另一个为空。改变服务器的行为方式不是一种选择。我希望有Object 和null 或两者都有Observables。

JsFiddle here.

【问题讨论】：

标签： knockout.js knockout-mapping-plugin

【解决方案1】：

您需要使用create option 告诉映射插件它应该如何映射您的child 属性。

因此，如果您想拥有Object 和null，当您的子属性为null 时，您需要返回null：

var mappingOptions = {
    child: {
        create: function(options) {
            if (!options.data)
                return null;
            return ko.mapping.fromJS(options.data);
        }
    }
}

ko.mapping.fromJS(data, mappingOptions, viewModel.data);

演示JSFiddle.

或者如果你想要他们两个Observables:

var mappingOptions = {
    child: {
        create: function(options) {
            return ko.observable(ko.mapping.fromJS(options.data));
        }
    }
}

ko.mapping.fromJS(data, mappingOptions, viewModel.data);

【讨论】：

总是测试 options.data 的空值，然后返回空的 ko.observable()

【解决方案2】：

如前所述，解决方案是映射选项，但请确保始终测试 options.data 的空值，然后返回空的 ko.observable()，否则您将有很多装订麻烦！我花了很多时间才找到它。

var mappingOptions = {
    child: {
        create: function (options) {
            return options.data != null ? ko.observable(ko.mapping.fromJS(options.data)) : ko.observable();
        }
    }
}

【讨论】：