2012-10-29 5 views
1

나는 달 링크 I가 활성화 제외한 모든 링크 "를 선택 개월"클래스를 사용하지 않고 클릭 한 후 활동에 사용하려는 전환 CSS 클래스 KnockoutJS는

<ul data-bind="foreach: factMonthes"> 
    <li data-bind="click: $root.changeFactMonth, css:{'selected-month': num == $root.activeFactMonth()}"> 
</ul> 

있습니다. 물론, 내 메서드 changeFactMonth()에서 클래스를 비활성화 할 수 있지만 녹아웃 바인딩으로 할 수 있습니까? month_num가 관찰 할 경우

function FactMonth(num){ 
    this.num = num; 
    this.name = MonthesNames[num - 1]; 
    this.active = false; 
} 

function ViewModel() { 

    self.factMonthes = ko.observableArray();  
    self.activeFactMonth = ko.observable(new Date().getMonth() + 1); 

    for(var i = 1; i <= 12; i++) 
    { 
     var month = new FactMonth(i); 
     month.active = self.activeFactMonth() == i; 
     self.factMonthes.push(month); 
    } 
} 
+0

바인딩 텍스트에')'가 추가되어 있습니다 :'activeFactMonth()) – Tomalak

+0

실제 코드가 아니고 구문 오류가 중요하지 않습니다. – Ozerich

답변

3

는 당신이 그것을 푸는해야합니다 당신이 표현의 일부로 사용하지 않는 경우에만 직접 관찰 가능한을 사용할 수 있습니다

<li data-bind=" 
    click: $root.changeFactMonth, 
    css:{'selected-month': month_num() == $root.activeFactMonth()} 
"> 

. 비교 (==)가 표현식이므로 기본 값을 사용해야합니다. 즉, 관찰 가능을 호출해야합니다.

+0

아니요, 월 번호는 관찰 할 수 없습니다. 객체 Factmonth는 관찰 가능하다. 내 게시물의 업데이트를 참조하십시오. – Ozerich

+0

@Ozerich'FactMonth'의'active' 속성을 관측 가능하게 만듭니다 ('this.active = ko.observable (false);'). 당신의 CSS를 그 관측 가능하게 묶으십시오 ('data-bind = "css : { 'selected-month': active}"). 끝난. 물론'changeFactMonth()'를 수정하여'month.active = true;'가 아니라'month.active (true);를 수정하는 것을 잊지 마십시오. – Tomalak

+0

예, 맞습니다. Css는 달이 활성화되어있을 때 사용 가능하지만 CSS 클래스는 set 속성을 false로 설정 한 후 삭제하지 않습니다. – Ozerich