knockoutjs make selectable items onclick внутри foreach

Question

Я зацикливаю элементы в инструкции foreach. На странице загрузки, по умолчанию я выбрать первый элемент (данные привязку = "CSS: {отмеченными: $ индекс() == 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;} 

Мой вопрос заключается в том, чтобы сделать другие элементы по выбору, выбрав пункт Clicked (.selected) и удаление выбираемого класса от первого пункта

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

Answer 1

Наблюдаемые selectedIndex, которые могут использоваться в привязке css, чтобы определить, выбрана ли строка.

Пример: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> 

вид Модель

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