Knockout.js将属性添加到子元素

Question

我的代码不会在由knockout.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); 
     } 
    } 
}; 

我称为this post以创建自定义映射，但它似乎不起作用，因为第二个console.log输出与第一个相同的JSON。

此外，我试图创建基于this thread和another one的嵌套映射选项，但它不起作用。

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); 
    } 
}; 

如何正确添加一个新的属性到原始viewmodel？

Answer 1

从ko.toJS映射documentation（toJS和工作的toJSON方式相同的文件中所述）

• 取消映射

如果你要转换的映射对象返回到一个普通的JS对象，使用： var unmapped = ko.mapping.toJS(viewModel); 这将创建一个未映射的对象只包含t他绘制了是你原来的JS对象的一部分对象

如果你想在JSON包含的属性您手动新增要么使用ko.toJSON，而不是ko.mapping.toJSON包括一切，或者使用include选项首先创建你的时候对象来指定要添加的属性。

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

编辑：在特定情况下，你的映射选项相互冲突。您已经为CurrentUser字段设置了特殊指令，但是在创建函数中重写了它们。这就是我想你的映射选项应该是这样的：

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 }); 
    } 
    } 
}; 

，这里是一个fiddle的工作示例