Knockout.js向子元素添加属性

Question

我的代码没有在敲除视图模型的子元素下创建新属性，该子视图由敲除.mapping.fromJS映射。

我有：

//model from Entity Framework
console.log(ko.mapping.toJSON(model));
var viewModel = ko.mapping.fromJS(model, mappingOption);
ko.applyBindings(viewModel);
console.log(ko.mapping.toJSON(viewModel));

第一个console.log输出：

{
  "Id": 0,
  "CurrentUser": {
    "BoardIds": [
      {
        "Id": 0
      }
    ],
    "Id": 1,
    "UserName": "foo",
    "IsOnline": true
  },
  "Boards": []
}

然后mappingOption是：

var mappingOption = {
    create: function (options) {
        var modelBase = ko.mapping.fromJS(options.data);

        modelBase.CurrentUser.UserName = ko.observable(model.CurrentUser.UserName).extend({ rateLimit: 1000 });

        //some function definitions

        return modelBase;
    },
    'CurrentUser': {
        create: function (options) {
            options.data.MessageToPost = ko.observable("test");
            return ko.mapping.fromJS(options.data);
        }
    }
};

我参考了这篇文章来创建自定义映射，但是它似乎不起作用，因为第二个console.log向第一个控制台输出了相同的JSON。

另外，我尝试基于该线程和另一个 线程创建嵌套映射选项，但是它也无法正常工作。

var mappingOption = {
    create: function (options) {

        //modelBase, modifing UserName and add the functions

        var mappingOption2 = {
            'CurrentUser': {
                create: function (options) {
                    return (new(function () {
                        this.MessageToPost = ko.observable("test");
                        ko.mapping.fromJS(options.data, mappingOption2, this);
                    })());
                }
            }
        }
        return ko.mapping.fromJS(modelBase, mappingOption2);
    }
};

如何正确地向原始视图模型添加新属性？

Answer 1

来自ko.toJS的映射文档 （toJS和toJSON的工作方式与文档中所述的相同）

• 取消映射

如果要将映射对象转换回常规JS对象，请使用： var unmapped = ko.mapping.toJS(viewModel); 这将创建一个未映射的对象，该对象仅包含作为原始JS对象一部分的映射对象的属性

如果要让json包含您手动添加的属性，请使用ko.toJSON而不是ko.mapping.toJSON来包含所有内容，或者在首次创建对象时使用include选项指定要添加的属性。

var mapping = {
    'include': ["propertyToInclude", "alsoIncludeThis"]
}
var viewModel = ko.mapping.fromJS(data, mapping);

编辑：在您的特定情况下，您的映射选项相互冲突。 您已经为CurrentUser字段设置了特殊说明，但是在create函数中将其覆盖。 我认为您的映射选项应如下所示：

var mappingOption = { 
  'CurrentUser': {
    create: function (options) {
      var currentUser = ko.mapping.fromJS(options.data, {
        'UserName': {
          create: function(options){
            return ko.observable(options.data);
          }
        },
        'include': ["MessageToPost"]
      });
      currentUser.MessageToPost = ko.observable("test");
      return ko.observable(currentUser).extend({ rateLimit: 1000 });
    }
  }
};

这里是一个小提琴的工作示例