Highlight rows of my table where checkbox is checked with knockout - html

Question

I have an html table with a checkbox on first column. I would like to highlight the row where checkboxes are checked with knockout.
<table class="defaultGrid">
<thead>
<tr>
<th>Check</th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody data-bind="foreach: model.Things">
<tr>
<td><input type="checkbox" data-bind="click: $root.selectThing " /></td>
<td data-bind="text: ID"></td>
<td data-bind="text: Name"></td>
</tr>
</tbody>
</table>
Here is an example on jsFiddle: http://jsfiddle.net/jJ4H6/1/
I don't know how to proceed. I don't want to add an extra property on my model like 'isSelected'.
Any idea?
Thanks.

Answer 1

I would definitely add a knockout observable to your 'Thing' that determines whether or not your tr element has a yellow background or not.
However, if you really don't want to add something like this to your view model, you'll have to add some logic to your selectThing function to handle this for you e.g.
self.selectThing = function(item, event) {
$(event.target).parent().parent().addClass('selected');
};

Answer 2

Check out this Jfiddle http://jsfiddle.net/jJ4H6/27/
$(function() {
Thing = function(id, name, selected) {
var self = this;
self.ID = id,
self.Name = name
self.isChecked = ko.observable(false);
};
function viewModel() {
var self = this;
self.model = {};
self.model.CurrentDisplayThing = ko.observable();
self.model.Things = ko.observableArray(
[
new Thing(1, "Thing 1"),
new Thing(2, "Thing 2"),
new Thing(3, "Thing 3")
]);
self.selectThing = function(item) {
};
}
ko.applyBindings(new viewModel());
});