녹아웃 foreach css 멀티 클래스 $ 데이터

Question

인사 모두 knockoutjs 사람들.

이 예제에서는 DIV에 추가하려는 두 개의 추가 CSS 클래스가 있습니다.

<div data-bind="foreach: [{name: 'Hello', size:'Triple'}]"> 
     <div class="tile" 
     data-bind="css: {'tile-selected': true, $data.size : true}"> 
     </div> 
    </div> 

첫 번째 것은 '부울'에 따라 '타일 선택'됩니다. 이것은 잘 작동합니다.

두 번째는 실제로 '배'클래스의 이름 (이 예에서, 항상 추가, 즉 '참')

내가 오류 얻을 :

catch되지 않은 오류 : 할 수 없음 바인딩을 파싱합니다. 메시지 : SyntaxError : 예기치 않은 토큰입니다. 바인딩 값 : css : { 'tile-selected': true, $ data.size : true}

나는 $ data.size 부분을 사용하여 'Triple'리터럴을 사용할 수 없다고 가정합니다. '크기'속성에서 가져옵니다. 내가 할 수있는 방법이 있니? ($ data [ 'size']도 작동하지 않는 것 같습니다.)

Answer 1

ko observables 또는 속성을 클래스 이름으로 사용할 수 없습니다. 대신 이것을 위해 별도의 속성을 만들고 동적 CSS 바인딩에 다음과 같은 속성을 사용해야합니다.

<div data-bind="css: sizeCSS"> Profit Information</div> 

var viewModel = { 
/// some view model properties here. 
     }; 

viewModel.sizeCSS = ko.computed(function() { 
    return this.size(); 
}, viewModel); 

편집 : http://knockoutjs.com/documentation/css-binding.html