행을 자바 스크립트를 사용하여 선택한

Question

내 MVC 면도기 프로젝트에서 행 (목록 형식)에 데이터를 표시하고 있습니다. 이 값은 javascript Knockout을 사용하여 표시됩니다.

자바 스크립트 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을 만든 것입니다.

내가 알기로 선택한 옵션을 관찰 가능 항목에 저장합니다. 그리고 databind는 선택된 옵션이 현재 옵션 인 경우 '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); 

.