挖空：Table Select 取消选择行。 Issue/challenge 取消选择行

Question

我有一个 Table 使用 Knockout 来填充数据和 select 行。现在的挑战是我可以 select 该行及其详细信息。但是当我点击分页或者在任何特定的搜索框上时，我希望删除select行。

这里是 Fiddle 将解释更多

下面是 HTML 页面的模型代码

var RowModel = function(id, name, status) {
  this.ID = ko.observable(id);
  this.Name = ko.observable(name);
  this.Status = ko.observable(status);

};

RowModel.fromRawDataPoint = function(dataPoint) {
  return new RowModel(dataPoint.id, dataPoint.name, dataPoint.status);
};

Answer 1

从 fiddle 中，我可以看到您正在通过调用 self.selected(null) 和 self.enableEdit(false) 来实现取消选择。

因此，只要更改页面或完成搜索，您就可以再次调用它们。

self.deselect = function(){
    self.selected(null);
    self.enableEdit(false);
};

this.next = function() {
    self.deselect();
    if(self.pageNumber() < self.totalPages()) {
        self.pageNumber(self.pageNumber() + 1);
    }
}

this.lastpage = function() {
    self.deselect();
    if(self.pageNumber() < self.totalPages()) {
        self.pageNumber(self.totalPages());
    }
}


this.firstpage = function() {
    self.deselect();
    if(self.pageNumber() != 0) {
        self.pageNumber(self.pageNumber()-self.pageNumber());
        alert(self.pageNumber());
    }
}

this.previous = function() {
    self.deselect();
    if(self.pageNumber() != 0) {
        self.pageNumber(self.pageNumber() - 1);
    }
}

编辑：在您评论 ID、名称和状态未更新后，我添加了 3 个新的可观察对象 selectedName、selectedID 和 selectedStatus。我在 HTML 中使用这些可观察对象，以便在 selected 更改时更新它们。这是通过在 selected.

上使用 subscribe 函数来完成的

HTML

<input type="text" name="ID" data-bind="value: selectedID, enable: enableEdit" />
<br>Name :
<input type="text" name="Name" data-bind="value: selectedName, enable: enableEdit" />
<br>Status :
<input type="text" name="Status" data-bind="value: selectedStatus, enable: enableEdit" />

JS

self.selected = ko.observable(self.items()[0]);
self.selectedID=ko.observable(self.items()[0].ID());
self.selectedName=ko.observable(self.items()[0].Name());
self.selectedStatus=ko.observable(self.items()[0].Status());

self.selected.subscribe(function(newValue){
  if (newValue === null){
    self.selectedID(null);
    self.selectedName(null);
    self.selectedStatus(null);
    return;
  }
  if (typeof newValue !== 'undefined'){
    self.selectedID(newValue.ID());
    self.selectedName(newValue.Name());
    self.selectedStatus(newValue.Status());
  }
});

挖空：Table Select 取消选择行。 Issue/challenge 取消选择行

Knockout: Table Select Unselect Row. Issue/challenge with unselecting Row

html

javascript

knockout-2.0

knockout.js

knockout-3.0