敲除映射嵌套对象绑定在它们为空时不更新答案

【问题标题】：Knockout mapping nested objects binding not updating when they are null敲除映射嵌套对象绑定在它们为空时不更新
【发布时间】：2014-01-11 13:26:10
【问题描述】：

使用 ko.mapping.fromJSON 只要定义了嵌套对象，我就可以从 JSON 绑定。当我将嵌套对象更新为 null 或空时，绑定会中断。

在这段代码中，我有五个不同的数据集，我使用 model.nextDataset 函数对其进行迭代。当数据集到达第四个和第五个变体时，它会破坏与内部对象的绑定。

var datasets = ["{\"id\": 1,\"reference\": \"reference1\",\"inner\": {\"id\": 1,\"name\": \"name1\"}}",
    "{\"id\": 1,\"reference\": \"reference2\",\"inner\": {\"id\": 1,\"name\": \"name2\"}}",
    "{\"id\": 1,\"reference\": \"reference3\",\"inner\": {\"id\": null,\"name\": null}}",
    "{\"id\": 1,\"reference\": \"reference3\",\"inner\": {}}",
    "{\"id\": 1,\"reference\": \"reference3\",\"inner\": null}"];

var mapping = {
    'create': function (options) {
        return new Model(options.data);
    },
        'key': function (data) {
        return ko.utils.unwrapObservable(data.id);
    },
        'inner': {
        'create': function (options) {
            return new InnerModel(options.data);
        }
    },
        'key': function (data) {
        return ko.utils.unwrapObservable(data.id);
    }
};
/*
var innerMapping = {
    'key': function(data) {
        return ko.utils.unwrapObservable(data.id);
    }
};
*/
var InnerModel = function (data) {
    var self = this;
    ko.mapping.fromJS(data, {}, self);
    self.innerName = ko.computed(function () {
        return self.name() + " computed";
    }, self);
};

var Model = function (data) {
    var self = this;
    ko.mapping.fromJS(data, mapping, self);
    self.innerName = ko.computed(function () {
        return self.inner.name() + " computed";
    }, self);
}

var model = {
    dataset: ko.observable(0),
    model: ko.mapping.fromJSON(datasets[0], mapping, model),
    nextDataset: function () {
        model.dataset(model.dataset() + 1);
        if (datasets.length === model.dataset()) {
            model.dataset(0);
        }
        ko.mapping.fromJSON(datasets[model.dataset()], mapping, model.model);
    }
}

ko.applyBindings(model);

随附的html：

<div id="testko">
    <p>Dataset: <span data-bind="text: dataset"></span><p>
    <input type="text" data-bind="value: model.reference" /><br>
    <div data-bind="with: model.inner"><input type="text" data-bind="value: innerName" /><br></div>
    <input type="text" data-bind="value: model.innerName" /><br>
    <input type="button" data-bind="click: nextDataset" value="Next Dataset" />
</div>

我制作了一个 jsfiddle 来尝试演示这一点：

http://jsfiddle.net/Ku4KN/

我确信我的映射不正确，但我使用淘汰赛的时间还不够长，无法说出原因。

【问题讨论】：

您正在访问 inner.name 但 inner 为空！

标签： knockout.js knockout-mapping-plugin

【解决方案1】：

您的计算 observable 正在崩溃，因为它正在访问 self.name() ，其中 self 设置为 null - 这是映射插件的正常行为，您正确使用 with 绑定可以阻止大多数人遇到的问题在这种情况下。映射插件无法为空对象创建对象结构。

问题是您在计算的可观察对象的内部名称中遇到了一个 javascript 错误，因此淘汰库不会继续运行 - 只需在 self.name() 周围添加一个空检查，就像您对“with”所做的那样"绑定。

【讨论】：