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的工作示例