1

knockout.mapping プラグインを使用して JSON データをマップしようとしていますが、階層的な JSON データがオブジェクト プロパティを正しく設定できません。トップ レベルは正常にロードされますが、子の 'RootTarget' データはロードされませんか?

私は何を間違っていますか？

ノックアウト 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>
4

2 に答える 2

2

yourRootTargetは関数として宣言されているため、値を取得して格納されたオブジェクトにアクセスするには、ko.observable空の引数で呼び出す必要があります。()

したがって、バインディングを変更して、不足している を追加するだけです():

<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、括弧は必要ありません。
  • 元のソリューションがnull参照例外をスローする一方で、RootTarget値が入力を非表示にする場合に機能します。nullundifiedRootTarget().ID
于 2013-07-12T10:23:45.483 に答える
0

プロパティを取得する前にオブザーバブルを評価する必要があるため、roottarget マッピングにブラケットが必要です。

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

あるいは、RootTarget は実際にはオブザーバブルである必要はなく、そのプロパティのみがオブザーバブルである必要があります。そのため、下の行を削除すると、通常のオブジェクトとして自動的に作成され、バインディングはそのまま機能します。

this.RootTarget = ko.observable;
于 2013-07-12T10:31:36.173 に答える