Purpose(목적)
style 바인딩은 해당 DOM요소에 style의 값을 하나또는 그 이상 추가 또는 삭제하는 기능이다. 예를 들어 음수또는 변화값에 따른 width값을 빨간 색으로 강조할때 매우 유용하다.
(참고: 여러분이 명시적으로 스타일의 값을 적용하기 원하지 않는다면 CSS 클래스 바인딩을쓰세요)
Example
<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }"> Profit Information</div><script type="text/javascript"> var viewModel = { currentProfit: ko.observable(150000) // Positive value, so initially black }; viewModel.currentProfit(-50); // Causes the DIV's contents to go red</script> |
위의 예제는 currentProfit값이 0밑으로 떨어지면 해당 요소에 style.color속송을 red로 주려한다 그리고 0 이상이면 검정색으로 표현하려한다.
Parameters
Main parameter(주 파라미터)
해당 스타일의 이름에 맞는 Javascript 객체의 속성 이름을 넘겨줘야한다. 그리고 여러분이 설정하고 싶은 값을 넣어주면 된다.
여러분은 한번에 여러 style을 지정할 수 있습니다. 예를 들어 여러분의 view model에 isSevvere라는 프로퍼티가 있다면,
<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black', fontWeight: isSevere() ? 'bold' : '' }">...</div>만약 여러분의 파라미터가 observable값을 참조한다면 바인딩은 observable값이 바뀔때마다 해당 style을 업데이트 할것입니다. 만약 파라미터가 observable을 참조하지 않는다면 한번만 해당 style을 설정할 것입니다.
일반적으로 여러분은 Javascript Expression과 함수들을 파라미터 값들로 사용할수 있습니다. KO는 그걸 계산한 결과 값을 가지고 style의 값을 적용할지 여부를 판단합니다.
Additional parameters(추가 파라미터)
- None(없음)
참고: 올바르지 않은 JavaScript 변수들의 이름을 적용하기
만약 여러분이 font-weight또는 text-decoration 스타일을 적용하고 싶다면 아래와 같이 하면 됩니다,
- Don’t write
{ font-weight: someValue }; do write{ fontWeight: someValue } - Don’t write
{ text-decoration: someValue }; do write{ textDecoration: someValue }
위와같은 케이스를 정리한 곳입니다.http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html
필요한 라이브러리
Knockout library Core.