2

基于 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 的第三个参数表示目标。”

这是一个演示正在发生的事情的小提琴。

4

1 回答 1

3

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

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

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

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

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

演示JSFiddle。

于 2013-01-25T05:54:20.097 回答