具有复杂对象的 KnockoutJS 映射插件

Question

基于 KnockoutJS 映射 documentation，我正在尝试做的事情似乎非常简单，但是我没有得到预期的结果。

所以对于一些简单的测试html-

<div data-bind="with: rootItem">
<p data-bind="text: subProperty"></p>
    <div data-bind="with: subObject">
        <p data-bind="text: subSubProperty"></p>
</div>

还有这个简单的视图模型和应用程序

var vm = function(){
this.rootItem = ko.observable();

this.loadData = function(data){

    //map the rootObject here
    ko.mapping.fromJS(data,{},this.rootItem());

    //this.rootItem is undefined
    console.log(this.rootItem());
 };


};
   //create new viewmodel
    var myVM = new vm();
   //create some dummy data with nested objects and properties
    var data = {
    subProperty: "Top Level Property",
    subObject: {
        subSubProperty:"Sub Level Property",
        },
    };
  //load the data
  myVM.loadData(data);
  //apply the vm
  ko.applyBindings(myVM);

所以 vm.rootObject 永远不会被设置。我是否缺少有关 ko.mapping 插件行为的信息？

这个 loadData 函数的实现得到了想要的结果，但是增加了额外的步骤。

this.loadData = function(data){

    //map the rootObject here
     this.rootItem(ko.mapping.fromJS(data));

    //this.rootItem is an object with a nested object and observable properties
    console.log(this.rootItem());
 };

为什么第一种方法会失败？在文档中，它非常清楚地指出“ko.mapping.fromJS 的第三个参数表示目标。”

这是一个fiddle 演示正在发生的事情。

Answer 1

文档是对的“ko.mapping.fromJS的第三个参数表示目标。”。 但是你提供了错误的目标：

因为当您调用 ko.mapping.fromJS(data,{}, this.rootItem()); 时，this.rootItem 被初始化为 undefined，因此映射插件无法将其用作目标。

创建rootItem时使用空对象，它会正常工作：

var vm = function(){
    this.rootItem = ko.observable({});

    this.loadData = function(data){     
        ko.mapping.fromJS(data,{}, this.rootItem());             
     };
};

演示JSFiddle.