Question

我有一个使用Knockout的表格来填写数据并选择行。现在的挑战是我可以选择该行及其详细信息。但是，当我单击分页或在任何特定的搜索框上时，我希望取消选择行。

这里是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

从小提琴中，我可以看到您正在通过调用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即可对其进行更新。这是通过在subscribe上使用selected函数来完成的。

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());
  }
});

淘汰：表选择取消选择行。通过取消选择行

1 个答案: