0

ビューモデルでこのメソッドを使用して、通常のテンプレートとテーブル行の編集可能なテンプレートを切り替えます。

contactsViewModel.templateToUse = function (contact) {
         return contactsViewModel.selectedItem() === contact ? 'contacts-editTmpl' : 'contacts-itemsTmpl';
};

テンプレート名の代わりに、このメソッドを呼び出します。

<tbody data-bind="template: { name: templateToUse, foreach: filterItems }"></tbody>

それは機能しますが、編集を押すたびにリスト全体を再度レンダリングすることに深刻な懸念があります。

contactsViewModel.edit = function (contact) {
       contactsViewModel.selectedItem(contact);
};

残りではなく、selectedItemのテンプレートのみを変更したいのですが、どうすればよいかわかりません。

助けてくれてありがとう

4

1 に答える 1

1

1 つのオプションは、単に使用foreachしてから、行レベルのテンプレートを使用して各行でバインディングをfilteredItems使用することです。template

何かのようなもの：

<tbody data-bind="foreach: items">
    <tr data-bind="template: { name: $root.templateToUse }"></tr>
</tbody>

次のようなモデルを表示します。

var ViewModel = function() {
    this.items = ko.observableArray([
        { name: ko.observable("one") },
        { name: ko.observable("two") },
        { name: ko.observable("three") }
    ]);

    this.selectedItem = ko.observable();

    this.templateToUse = function(item) {
        return item === this.selectedItem() ? "edit" : "view";   
    }.bind(this);
};

ko.applyBindings(new ViewModel());​

サンプル: http://jsfiddle.net/rniemeyer/3rvTA/

別のオプションは、「選択された」オブザーバブルをアイテム自体に移動することです。これは、複数の行を編集モードにしたい場合にうまく機能します。

于 2012-11-08T17:59:10.590 に答える