data-binding - バインディング付きのノックアウト.js

Question

これはおそらく非常に基本的な質問ですが、次のビュー モデルでは、ajax 呼び出しから self.userData を入力しています。この情報を UI に表示したいのですが、'with' バインディングを使用する方法が適切であると考えました。ただし、ajax 関数が呼び出されるまで self.userData が空であるため、with バインディングからエラーが発生します。

HTML

<div data-bind="with: userData">
    <div data-bind="text: userId"></div>
     ...
</div>

モデル

var viewModel = function () {
        var self = this;
        self.userData = {};
        self.login =  function(data) {
            var postData = { ..trimmed out.. };
            $.ajax({
                type: "POST",
                url: "myService",
                data: postData
            }).done(function (data, status) {
                self.userData = ko.mapping.fromJS(data, userData);
                console.log(self.userData);

            }).fail(function (data, status) {
                alert('Could Not Login');
            });
        }

    };
    ko.applyBindings(new viewModel());

Answer 1

空のオブザーバブルで userData を初期化し、呼び出しが返されたら、マッピング プラグインによって作成されたオブジェクトで設定します。すなわち変化

self.userData = {};

と

self.userDara = ko.observable();

変更する

self.userData = ko.mapping.fromJS(data, userData);

と

self.userData(ko.mapping.fromJS(data,userData));