0

HTTP GET を使用してサーバーから非同期にフェッチされたデータを KnockoutJS に基づくフォームに入力する慣用的な方法は何でしょうか? 私が直面している問題は、ドメイン モデルの空のダミー インスタンスを作成しないと (以下のコードを参照)、呼び出しが完了する前にフォーム フィールドを呼び出そうdomainModel().nameとするため、Knockout が壊れることです。domainModel().description$.getJSON

この状況を処理する一般的な方法は何ですか? $.getJSON最初ko.applyBindings(new ViewModel(domainModelData));に成功コールバックを呼び出す必要がありますか、それとも他の方法がありますか?

HTML & インライン Javascript:

<form data-bind="submit: update">
    <input id="name" data-bind="value: domainModel().name"/>
    <input id="description" data-bind="value: domainModel().description"/>
    <button type="submit"/>     
</form>


<script type="text/javascript">
    $(document).ready(function () {
        ko.applyBindings(new ViewModel());
    });
</script>

ノックアウト ビュー モデル:

function DomainModel(data) {
    var self = this;
    self.id = ko.observable(data.id);
    self.name = ko.observable(data.name);
    self.description = ko.observable(data.description);
}

function ViewModel() {
    var self = this;

    // This feels somehow dirty
    self.domainModel = ko.observable(new DomainModel({id: null, name: "", description: ""}));

    self.update = function() {
        ...
    };

    $.getJSON("domainModel/<id>", function(domainModelData) {
        self.domainModel(new DomainModel(domainModelData));
    });
}
4

1 に答える 1

2

with バインディングまたは foreach バインディングを使用して、バインディングが解決を試みる前にオブジェクトが存在することを確認する必要があります。

<form data-bind="submit: update, with: domainModel">
    <input id="name" data-bind="value: name"/>
    <input id="description" data-bind="value: description"/>
    <button type="submit"/>     
</form>

基本的に、domainModel が値の名前と説明を持つまでは解決されません。別のアプローチは、$data を使用することです。「データがない場合は、データがあるまで待つ」という接頭辞

<form data-bind="submit: update">
    <input id="name" data-bind="value: $data.domainModel().name"/>
    <input id="name" data-bind="value: $data.domainModel().description"/>
    <button type="submit"/>     
</form>
于 2013-08-14T13:10:27.817 に答える