淘汰赛表：突出显示表行

Question

我在这里有一个示例Fiddle。在此表中，我希望实现突出显示选定的特定行。如果未选中，则不应突出显示行。 我找到了Fiddle 的众多示例之一，但我无法将它们合并到上面的示例小提琴中。 下面是显示基本表格的 HTML 代码。

<table id="devtable">
<thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Status</th>
    </tr>
</thead>
<tbody data-bind="foreach: items">
    <tr data-bind=" click: $parent.select  ">
        <td data-bind="text: ID"></td>
        <td data-bind="text: Name"></td>
        <td data-bind="text: Status"></td>
    </tr>
</tbody>

身份证：
名称：
状态：

这里是敲除函数来做操作

<Script>
var rowModel = function (id, name, status) {
    this.ID = ko.observable(id);
    this.Name = ko.observable(name);
    this.Status = ko.observable(status);
};

var myData = [{
    id: "001",
    name: "Jhon",
    status: "Single"
}, {
    id: "002",
    name: "Mike",
    status: "Married"
}, {
    id: "003",
    name: "Marrie",
    status: "Complicated"
}];

function MyVM(data) {
    var self = this;

    self.items = ko.observableArray(data.map(function (i) {
        return new rowModel(i.id, i.name, i.status);
    }));

    self.select = function(item) {
        self.selected(item);
        self.enableEdit(true);
    };


    self.flashCss = ko.computed(function () {
        //just an example

        return 'flash';
    });


    self.selected = ko.observable(self.items()[0]);

    self.enableEdit = ko.observable(false);

    self.changeTableData = function() {
// How do I change the Data here and it should also reflect on the Page.
// If I do binding depending on condition it gives me error
if(true){
var myData = [{
    id: "001",
    name: "Jhon",
    status: "Single"
}, {
    id: "002",
    name: "Mike",
    status: "Married"
}, {
    id: "003",
    name: "Marrie",
    status: "Complicated"
}];
}
else{
 myData = [{
    id: "111",
    name: "ABC",
    status: "Single"
}, {
    id: "222",
    name: "XYZ",
    status: "Married"
}, {
    id: "3333",
    name: "PQR",
    status: "Complicated"
}];
}
}   

}

ko.applyBindings(new MyVM(myData));
</script>

---

CSS 代码如下

.flash { background-color: yellow; }

Answer 1

您可以使用css绑定根据当前选择的值添加.flash类：

<tr data-bind="click: $parent.select, 
               css: { flash: $parent.selected() === $data }">
  ...
</tr>

如果您不喜欢在视图中定义此逻辑，您可以传递对 selected observable 的引用并在您的 RowModel 中创建一个计算属性：

var RowModel = function( /* ... */ selectedRow) {
  // ...
  this.isSelected = ko.pureComputed(function() {
    return selectedRow() === this;
  }, this);
}

这是您的小提琴中的快速修复：

http://jsfiddle.net/wa78zoe4/

---

附：如果您想要切换行为，请将select 更新为：

self.select = function(item) {
  if (item === self.selected()) {
    self.selected(null);
    self.enableEdit(false);
  } else {
    self.selected(item);
    self.enableEdit(true);
  }
};