Knockout set highlight on selected item in list

by Quango

HTML

<ul data-bind="foreach: headers">
  <li data-bind="text: title, css: $root.GetClass(title)"></li>
</ul>

CSS

.selected {
  background-color: yellow;
}

JavaScript

var viewModel = function() {
  var self = this;
  // selected value
  self.headers = [{
    title: 'Item 1',
    sortKey: 'item1',
    asc: true,
    active: false
  }, {
    title: 'Item 2',
    sortKey: 'item2',
    asc: false,
    active: true
  }, {
    title: 'Item 3',
    sortKey: 'item3',
    asc: true,
    active: false
  }, {
    title: 'Item 4',
    sortKey: 'item4',
    asc: true,
    active: false
  }];

  self.selected = ko.observable('Item 3');

  self.GetClass = function(title) {
    return self.selected() == title ? "selected" : "";
  }
}

var vm = new viewModel();
ko.applyBindings(vm);