使用knockout映射JSON無法填充類型定義的對象屬性

我想使用knockout.mapping插件映射JSON數據，但是heirarcical JSON數據無法正確填充我的對象屬性，頂級加載正常，但不是孩子的'RootTarget'數據？使用knockout映射JSON無法填充類型定義的對象屬性

我在做什麼錯？

淘汰賽的Javascript

var Query = function(json) 
{ 
    this.ID = ko.observable(0); 
    this.Name = ko.observable(); 
    this.RootTargetID = ko.observable(); 
    this.RootTarget = ko.observable(); 

    var mapping = { 
     'RootTarget': { 
      create: function (args) { 
       return new QueryTarget(args.data, null); 
      } 
     } 
    }; 

    ko.mapping.fromJS(json, mapping, this); 
} 


var QueryTarget = function(json, parent) 
{ 
    this.ID = ko.observable(0); 
    this.Name = ko.observable(); 
    this.ParentID = ko.observable(0); 
    this.Parent = ko.observable(parent); 
    this.FilterID = ko.observable(0); 

    var mapping = { 
     'ignore': ["Parent"] 
    }; 

    ko.mapping.fromJS(json, mapping, this); 
} 

var QueryModuleViewModel = function() 
{ 
    var json = { 
     "ID": 2, 
     "Name": "Northwind 2", 
     "RootTargetID": 2, 
     "RootTarget": { 
      "ID": 2, 
      "Name": "Customers", 
      "ParentID": null, 
      "FilterID": 2, 
      "Parent": null 
     } 
    }; 

    this.QueryObj = new Query(json); 
} 

window.onload = function() { 
    ko.applyBindings(new QueryModuleViewModel()); 
};

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>TypeScript Knockout Mapping Query Test</title> 
    <link rel="stylesheet" href="app.css" type="text/css" /> 

    <script src="Scripts/jquery-2.0.2.js" type="text/javascript"></script> 
    <script src="Scripts/knockout-2.2.1.debug.js" type="text/javascript"></script> 
    <script src="Scripts/knockout.mapping-latest.debug.js" type="text/javascript"></script> 
    <script src="my_js_query_test.js"></script> 

</head> 
<body> 
    <h1>TypeScript Knockout Mapping Query Test</h1> 
    <div data-bind="with: QueryObj"> 
     <span data-bind="blah: console.log($context)"></span> 

     <p>Query Name: <input data-bind="value: Name" /></p> 

     <hr /> 
     <p>Quick test of RootTarget Values</p> 
     <p>RootTarget.ID: <input data-bind="value: RootTarget.ID" /></p> 
     <p>RootTarget.Name: <input data-bind="value: RootTarget.Name" /></p> 
    </div> 
</body> 
</html>

來源

2013-07-12 DIGGIDY

可以PLZ發佈的jsfiddle例子嗎？只是你的JSON數據和測試它作爲靜態數據 –

對不起，應該做的是，在弗里斯特地方複製。幸運@nevesv在他的回答下面發佈了一個小提琴。 – DIGGIDY

因爲你RootTarget被聲明爲ko.observable這是一個函數，所以你需要用空ARGS ()調用它來得到它值並訪問存儲的對象。

所以，你只需要改變你的綁定，並添加缺少的()：

<p>RootTarget.ID: <input data-bind="value: RootTarget().ID" /></p> 
<p>RootTarget.Name: <input data-bind="value: RootTarget().Name" /></p>

演示JSFiddle.

或者你也可以在這裏使用with結合

<p>Quick test of RootTarget Values</p> 
<!-- ko with: RootTarget --> 
    <p>RootTarget.ID: <input data-bind="value: ID" /></p> 
    <p>RootTarget.Name: <input data-bind="value: Name" /></p> 
<!-- /ko -->

演示JSFiddle.

它有一些很好的優點：

你不必重複RootTarget
的with自動解開的觀測，所以你可以只寫with: RootTarget，沒有括號需要
它工作時的情形RootTarget值爲null或undified因此它隱藏輸入，而您的原始解決方案RootTarget().ID會拋出空引用異常。

來源

2013-07-12 10:23:45 nemesv

我是這樣的一個白癡，大聲笑，我知道這是簡單的東西，但只是看不到明顯的，謝謝你，先生:) – DIGGIDY

您需要在roottarget映射中使用括號，因爲您需要先評估observable，然後才能獲取它的屬性。

<p>RootTarget.ID: <input data-bind="value: RootTarget().ID" /></p>

另外，RootTarget實際上並不需要是可觀察到的，只是它的屬性做，因此，如果您刪除線之下，它會自動爲普通對象被創建和您的綁定將工作，因爲它們是。

this.RootTarget = ko.observable;

來源

2013-07-12 10:31:36 DoctorMick

它是從這個問題的TypeScript類定義轉換，但我想應用相同的規則還有，好的提示！謝謝：） – DIGGIDY

使用knockout映射JSON無法填充類型定義的對象屬性

回答

相關問題