2012-09-28 3 views
4

넉 아웃에서 이것을하고 싶습니다. 내 자바 스크립트 모델 클래스는이 방법이이 '배지 경보'클래스를 생성하는 데 실패넉 아웃 JS css "else"조건

self.firstPlace = ko.computed(function() { 
     return self.rank() == 1; 
    }); 

있다

<span class="badge" data-bind="text: rank, css: {'badge-success': firstPlace, 
     'badge-warning': !firstPlace}"></span> 

. 나는 firstPlace == false(!firstPlace)과 같은 데이터 바인딩 속성에서 몇 가지 호출 변형을 시도했다. 대신에 내 모델에 두 번째 역 방법을 추가 할 수 있습니다

물론
<span class="badge" data-bind="text: rank, css: {'badge-success': firstPlace, 
     'badge-warning': notFirstPlace}"></span> 


    // YUCK 
    self.notFirstPlace = ko.computed(function() { 
     return self.rank() != 1; 
    }); 

이 작동합니다. 그리고 정말 재미있는 Knockout JS의 만세입니다. 그러나 이것은 잘못된 것 같습니다. 누구 더 나은 방법이 있습니까?

답변

18

데이터 바인딩 특성에서 논리 연산을 사용하는 경우 관찰 가능 또는 계산 된 이름 뒤에 ()을 넣어야합니다.

<span class="badge" data-bind="text: rank, css: {'badge-success': firstPlace, 
    'badge-warning': !firstPlace()}"></span> 
+0

허용을! 내가 왜 그걸 시도하지 않았 니? parens를 사용할 때와하지 않을 때 주위를 돌아 다니기가 때때로 어려울 수 있습니다. 나는 일반적으로 시행 착오를 사용한다. 동일한 데이터 바인딩에서 두 가지 서명을 모두 확인한 것은 이번이 처음이라고 생각합니다. – carbontax

+0

대부분의 바인딩은 구문을 허용하도록 작성되었습니다 ... 괄호가 없으면 수동으로 실행합니다. 괄호를 추가 할 수없는 유일한 경우는 바인딩이 'value : obs'와 같은 "출력"일 때입니다. –

+0

그냥 번거 로움을 덜어주었습니다! 감사 +1 –

4

당신이 firstPlace() 번을 평가하려면 , 당신은 인라인 함수로 바인딩 css을 작성할 수 있습니다

<span class="badge" data-bind="text: rank, css: (firstPlace() ? 'badge-success' : 'badge-warning')"></span> 
관련 문제