knockoutjs make selectable items onclick within foreach

Question

I am looping items within a foreach statement. On page load, by default I am selecting the first item (data-bind="css: { selected: $index() == 0 }"):

var viewModel = function(){
 var self = this;
 self.pattern_index = 0;
 self.select = function(data) {
  //handle click
 };
 self.makes = [
  {id:1, name: 'Northwoods Prestige'},
  {id:2, name: 'Forest Bay'},
  {id:3, name: 'Timberland'}
 ];
};
var model = new viewModel();
ko.applyBindings(model);

HTML:

  <div class='oTitle'><span class="label label-primary">Patterns</span></div>
  <div data-bind="foreach: makes">
      <div data-bind="css: { selected: $index() == 0 }, click: $root.select.bind($data)">xx </div>
  </div>

CSS:

.selected{background-color:red;}

My question is how to make other items selectable, selecting the clicked item (.selected) and removing selectable class from first item

jsfiddle: http://jsfiddle.net/diegopitt/g57qs9a7/

Answer 1

Have a selectedIndex observable that can be used in the css binding to determine if a row is "selected".

Example: http://jsfiddle.net/Lgn4ppwo/

HTML

<div data-bind="foreach: makes">
    <div data-bind="css: { selected: $index() === $root.selectedIndex() }, click: $root.select.bind($root, $index())">xx </div>
</div>

View Model

function ViewModel() {
    this.selectedIndex = ko.observable(0);
    this.select = function(index) {
        this.selectedIndex(index);
    };
    ...
};