0

こんにちは、私は Knockout の学習に多くの時間を費やしており、アプリケーションで多くのプロパティを使用する必要があり、マッピング プラグインを使用する必要があるところまで来ました。

使用方法は簡単に思えますが、機能しないため何かが欠けていると思いました.テスト例を作成しました.これは私のコードです:

 function vm() {
            var self = this;
            this.viewModel = {};
            this.getData = function() {
                $.getJSON('/api/Values/Get').then(data)
                    .fail(error);

                function data(ajaxData) {
                    console.log(ajaxData);
                    self.viewModel = ko.mapping.fromJS(ajaxData);
                    console.log(self.viewModel);
                }

                function error(jError) {
                    console.log(jError);
                }
            };
        };

        ko.applyBindings(new vm());

これは私のhtmlです：

        <ul data-bind="foreach: viewModel">
        <li data-bind="text:FirstName"></li>
        <input type="text" data-bind="value: FirstName"/>
    </ul>
    <button data-bind="click : getData">Press me!</button>

私の ajax 呼び出しは、サーバーからこのデータを正常に取得します。

[
   {
     FirstName: "Madalina",
     LastName: "Ciobotaru",
     hobies: [
          "games",
          "programming",
          "hoby"
           ]
   },
   {
     FirstName: "Alexandru",
     LastName: "Nistor",
     hobies: [
        "games",
        "programming",
        "movies"
        ]
   }
]

データ関数が呼び出された後、viewModel get は配列に変換されますが、項目が含まれていないようです。

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

4

1 に答える 1

1

予想されるサーバー データを取得し、jsfiddle hereを作成しました。viewModel プロパティを監視可能な配列に変更し、マッピングの実行方法を変更する必要がありました。

動作するスクリプトのバージョンは次のとおりです。

function vm() {
    var self = this;
    this.viewModel = ko.observableArray([]);
    this.getData = function() {
        $.getJSON('/api/Values/Get').then(data)
            .fail(error);

        function data(ajaxData) {
            console.log(ajaxData);
            ko.mapping.fromJS(ajaxData, {}, self.viewModel);
            console.log(self.viewModel);
        }

        function error(jError) {
            console.log(jError);
        }
    };
};

ko.applyBindings(new vm());
于 2013-05-24T00:29:23.637 に答える