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映射插件與複雜的對象

回答

相關問題