Knockout 3에서 관찰 할 수없는 값으로 클래스를 변경하는 가장 좋은 방법은 무엇입니까?

Question

관찰 가능한 배열 items이 있습니다. 순서가 지정되지 않은 목록이 생성되어 탐색을 구성합니다. 클릭 한 항목에 active 클래스를 적용하고 다른 모든 항목에서 해당 항목을 제거하고 싶습니다. static css: { active: true }을 설정하려고 시도했지만 active은 아이템의 실제 속성이 아니기 때문에 구현 방법을 잘 모르겠습니다.

active 클래스를 항목 배열과 연관시키지 않기 때문에 관찰 할 수없는 값입니다. 필요에 따라 DOM에서만 변경해야합니다.

<ul id='nav' data-bind="foreach: items"> 
    <li data-bind="css: {selected: false}"> 
     <a data-bind="text: name, click: click_nav"></a> 
    </li> 
</ul> 

그리고 KO

...

function AppViewModel() { 
    this.items = ko.observableArray([ 
     { name: 'Course 1' } 
    ]); 
    select_course = function select_course(){ 
     // set class `active` for this 
    } 
} 
ko.applyBindings(new AppViewModel()); 

Answer 1

당신은 당신이 click_nav 기능에서 설정할 수있는 무엇 AppViewModel에 관찰 가능한 속성에 현재 "활성"항목을 저장할 수 있습니다

function AppViewModel() { 
    this.items = ko.observableArray([ 
     { name: 'Course 1' }, 
     { name: 'Course 2' }, 
     { name: 'Course 3' } 
    ]);  
    this.active = ko.observable(); 
    this.click_nav = function(item){ 
     this.active(item); 
    }; 
} 

그리고 현재 항목 ($data)과 css 바인딩의 active을 비교할 수 있습니다.

<ul id='nav' data-bind="foreach: items"> 
    <li data-bind="css: {selected: $parent.active() == $data}"> 
     <a data-bind="text: name, click: $parent.click_nav.bind($parent)"></a> 
    </li> 
</ul> 

데모 JSFiddle.