KnockoutJS映射插件与复杂的对象

基于KnockoutJS映射documentation我试图做的似乎很直接，但我没有得到我期望的结果。KnockoutJS映射插件与复杂的对象

因此，对于一些简单的测试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展示正在发生的事情。

来源

2013-01-25 thebringking

该文档是正确的“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。

来源

2013-01-25 05:54:20 nemesv

谢谢，现在有道理。有趣的是，当你使用with：binding来获得你想要的行为时，observable必须是未定义的。如果您预先加载了一个空对象，那么with with binding会尝试解析这些子对象，并且绑定失败。但是，如果您从一个未定义的对象开始并使用someObject（ko.mapping.fromJS（data））此方法，则该行为将按照预期使用with binding – thebringking

KnockoutJS映射插件与复杂的对象

回答

相关问题