Question

我在视图模型上使用此方法在普通模板和表格行的可编辑模板之间切换：

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的模板，而不是其余的，但不知道如何去做。

感谢您的帮助

Answer 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/

另一种选择是将“选定的”可观察对象移动到项目本身。如果您希望能够将多行放入编辑模式，这将很有效。

如何防止完整的模板重新呈现

1 个答案: