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。

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

1 个答案: