javascript - 具有复杂对象的 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>

以及这个简单的 View 模型和应用程序

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 .