javascript - 如何使用 knockout 映射从空值映射到空的可观察数组？

Question

当我尝试使用 knockout 映射从 null json 属性映射到 knockout 可观察数组时遇到问题。映射完成后， knockout 数组为空。

例如，我有以下数据:

var data = { 'Name': 'David', 'Modules': null };

以及以下模型:

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

var Model = function(data) {

    var self = this;

    var mapping = {
      'Modules': {
        key: function(module) {
            return ko.utils.unwrapObservable(module.Id);
        },
        create: function (options) {
            return new ModuleViewModel(options.data);
        }
      }
    };

    ko.mapping.fromJS(data, mapping, self);
};

然后使用以下方法将其应用于 View :

var model = new Model(data);
ko.applyBindings(model);

在 View 中，只需:

<span data-bind="text: Name"></span>
<span data-bind="text: Modules().length"></span>

我希望看到的(在我的名字之后)是已映射的模块数。如果数据中存在模块:

var data = { 'Name': 'David', 'Modules': [ {'Id': '1', 'Name': 'Module1'} ] }

然后正确的数字显示在 View 上，但如果模块在数据中设置为 null，则数字根本不会显示，因为它不知道映射到可观察数组。

另外，如果我在我的 View 模型上定义了一个额外的属性来映射到:

self.Modules = ko.observableArray;

这仍然没有像我期望的那样被映射，就像你在映射之后查询 self.Modules() 一样，如果你查询一个正常的，你会得到一个返回的 null 值返回空的可观察数组 []。

我在映射中做错了什么？我只想在模块数据为空时显示 0 值。

Click here to edit using jsbin

Answer 1

这里有一些您可能会觉得有用的映射更新。

http://jsbin.com/zeguxiveyi/1

请务必注意以下更改。

首先，您没有应用映射。

// need to invoke the mapping object
ko.mapping.fromJS(data, mapping, self);

其次，用 null 调用 observable 没有多大意义……这就像吃 donut 的洞，对吧？

//Initialize your data with null modules :: ERROR
//For the sake of having an empty observable array, we need to convert this null to an empty array
var data = { 'Name': 'David', 'Modules': null };
if(data.Modules == null) data.Modules = [];

第三，如果你可能得到空值，你应该继续添加一点短路逻辑来防止它......

var mapping = {
 'Modules': {
    create: function (options) {
      if(options.data !== null)
        return new ModuleViewModel(options.data);
    }
  }
};

总而言之， map 插件很好用，但是没有什么神奇的地方……还是需要确定你的数据是合理的。