0

新しいモデルを追加するためのモーダル ダイアログがあり、ajax 送信が成功した後、新しいモデルを入力できるようにしたいと考えています。したがって、私のロジックは次のようになりました。

新しいモデルのボタン -> editViewModel を新しいモデル インスタンスに設定 -> 送信ボタン -> 送信が成功した後、editviewModel を新しいモデルに設定

function model() {
    this.name = ko.observable("");
}

var myViewModel = new model();
myViewModel.name("Name 1");
ko.applyBindings(myViewModel, document.getElementById('foo'));

function newViewModel() {
    myViewModel = new model();
    myViewModel.name("NewName");
    //ko.applyBindings(myViewModel, document.getElementById('foo'));
}​

フィドル: http://jsfiddle.net/56gkz/

それを機能させるには、editViewModel を新しいモデル インスタンスに変更した後にバインディングを再適用する必要があります。それで、バインディングを再度適用するのは正しい方法ですか、それともそのケースを処理するためのより良い解決策はありますか?

4

1 に答える 1

3

一般に、applyBindings を 1 回呼び出す全体的なビュー モデルを作成し、モデルをスワップインおよびスワップアウトして編集するために使用するオブザーバブルを含めることをお勧めします。次に、マークアップでバインディングを使用してwith、そのオブザーバブルの現在の値に対してマークアップのセクションをバインドできます。

JS コードは次のようになります。

function Model(name) {
    this.name = ko.observable(name);
}

function RootViewModel() {
    var self = this;

    this.selectedModel = ko.observable();
    this.models = ko.observableArray();

    this.createModel = function() {
        self.selectedModel(new Model("New Name"));
    };

    this.acceptModel = function(model) {
        self.models.push(model);
        self.selectedModel(null);
    };      

    //initialize with a model to start
    this.createModel();       
};


ko.applyBindings(new RootViewModel());​

次のようなマークアップ:

<div data-bind="with: selectedModel">
    <input data-bind="value: name" />
    <button data-bind="click: $root.acceptModel">Accept</button>
</div>

<button data-bind="click: createModel">New Model</button>

<hr/>

<ul data-bind="foreach: models">
    <li data-bind="text: name"></li>
</ul>

サンプルはこちら: http://jsfiddle.net/rniemeyer/RWYL6/

于 2012-11-29T18:01:45.377 に答える