Knockout click row set selected class

by enorl76

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script id="results_list" type="text/html">
  <ul class="results__container">
    <!-- ko foreach: items -->
    <li class="results__item" data-bind="css: { 'results__item--selected': $root.selectedItem() === $data }, click: $root.selectItem">
      <span data-bind="text: Title"></span>
    </li>
    <!-- /ko -->
  </ul>
</script>

<div>
  Click any item to have knockout add class results__item--selected
</div>

<div data-bind="template: 'results_list'">

</div>

CSS

.results__container { 
  list-style-type:none; 
  padding: 0px;
}
.results__container .results__item {
  padding: 5px 0px;
}

.results__item--selected {
  background-color: #cccccc;
}
.results__item {
  cursor: pointer;
}

JavaScript

ViewModel = function() {
  self = this;
  this.selectedItem = ko.observable();
  this.items = ko.observableArray();

}
ViewModel.prototype.selectItem = function(item) {
  self.selectedItem(item);
}

vm = new ViewModel();

vm.items.push({
  "BranchKey": "a",
  "Title": "titleA"
});
vm.items.push({
  "BranchKey": "b",
  "Title": "title2"
});
vm.items.push({
  "BranchKey": "c",
  "Title": "title333"
});
vm.items.push({
  "BranchKey": "bd",
  "Title": "title4444"
});
vm.items.push({
  "BranchKey": "be",
  "Title": "title55555"
});


ko.applyBindings(vm);