The "css" binding

Purpose(목적)

css 바인딩은 Css클래스들을 해당 COM 요소에 삭제 또는 추가하는 기능이다. 예를 들어 만약 값이 음수가 되면 빨간 줄을 표시할때 매우 유용하다.

Example

<div data-bind="css: { profitWarning: currentProfit() < 0 }">    Profit Information </div>   <script type="text/javascript">     var viewModel = {         currentProfit: ko.observable(150000) // Positive value, so initially we don't apply the "profitWarning" class     };     viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied </script>

CSS 클래스 profitWarning 는  currentProfit 값이 0 이하일 때만 추가되고 0 이상일때는 삭제 된다.

Parameters(파라미터)

• Main parameter(주 파라미터)

  CSS 클래스들의 프로퍼티에 Javascript 객체를 바인딩하고 그 값을 true또는 false로 되어있다면 바로 적용 될것이다.

  여러분들은 CSS클래스에 여러개를 한번에 지정할수 있다. 예를 들어 여러분의 view model에 isServer라는 프로퍼티를 갖고 있다고 가정하자

  <div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">

  Non-boolean값들은 느슨하게 boolean값으로 해석된다. 예를 들어 0과 null은 false 반면 21 과 non-null 객체들은 true로 처리된다.

  만약 여러분의 파라미터가 observable을 참조하고 있다면 바인딩은 CSS 클래스를 observable값이 바뀔때마다 추가 또는 삭제할 것입니다. 만약 파라미터가 observable값을 참조하고 있지 않다면 단순히 한번만 추가 삭제가 일어납니다.

  일반적으로 여러분은 Javascript Expression과 함수를 파라미터 값으로 사용할수 있습니다. KO는 그것들을 처리할거고 그 처리 값으로 CSS 클래스에 적용할것입니다. 

• Additional parameters(추가 파라미터)

  • None(없음)

참고: 올바르지 않은 CSS class 적용하기

만약 여러분이 CSS 클래스에 my-class를 적용하고 싶다면 여러분은 아래와 같이 쓰면 안될것입니다.:

<div data-bind="css: { my-class: someValue }">...</div>

왜냐면 my-class 는 예제네서 올바르지 않은 인식자 이기 때문입니다. 해결방법은 간단합니다. 이름을 홋따옴표로 감싸면 됩니다. 

<div data-bind="css: { 'my-class': someValue }">...</div>

Dependencies(필요한 라이브러리)

Knockout library.