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

一种选择是仅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 回答