строка с выбранной строкой с использованием javascript

Question

В моем проекте MVC Razor я показываю данные в строках (формат списка). Эти значения показаны с помощью javascript Knockout.

Я хочу высветить выбранную строку, используя javascript KnockoutJs. Есть ли лучший способ сделать это.

Вот мой код

<ul class="navlist" data-bind="foreach:selectOptions" >      
    <li><a href="#" data-bind="click:selectOption"> 
     <span data-bind="text:name"></span> 
     <span data-bind="text:option"></span> 
     <span data-bind="text:optiondate"></span></a> 
    </li>           
</ul> 

Answer 1

Я сделал fiddle, это довольно просто.

Как вы можете видеть, я сохраняю выбранную опцию в наблюдаемом. И привязка данных применяет класс 'highlight', если выбранная опция является текущей опцией.

<ul class="navlist" data-bind="foreach:selectOptions" >      
    <li> 
     <div data-bind="click:$parent.selectOption, css: {'highlight' : $parent.selectedOption() == $data }" style="cursor: pointer"> 
     <span data-bind="text:name"></span> 
     <span data-bind="text:option"></span> 
     <span data-bind="text:optiondate"></span> 
     </div> 
    </li>           
</ul> 

Вид модели:

vm = { 
    selectOptions : [{name:'name1',option : 'option1', optiondate:'optiondate1'}, 
        {name:'name1',option : 'option2', optiondate:'optiondate2'}, 
        {name:'name3',option : 'option3', optiondate:'optiondate3'}], 
    selectOption : function(opt){ 
     vm.selectedOption(opt); 
    }, 
    selectedOption: ko.observable() 
} 

ko.applyBindings(vm); 

Я надеюсь, что это помогает.