Purpose(목적)
text 바인딩은 해당 DOM요소에 여러분의 파라미터를 보여준다.
일반적으로 <span> 또는 <em> 와같은 전형적으로 텍스트를 보여주기 위한 태크에 유용하다. 그러나 기술적으로 다른 어떤 요소에 사용해도 무방하다.
Example(예)
Today's message is: <span data-bind="text: myMessage"></span><script type="text/javascript"> var viewModel = { myMessage: ko.observable() // Initially blank }; viewModel.myMessage("Hello, world!"); // Text appears</script> |
Parameters(파라미터)
Main parameter(주 파라미터)
KO는 IE에서는 innerText 파이어복스에서는 textContent속성에 여러분의 파라미터 값을 설정한다. 어떠한 기존의 text내용도 덮어씌워진다.
만약 이 파라미터가 observalbe value이면 바인딩은 값이 변경이 있을때마다 요소의 text속성을 변경해 준다. 만약 파라미터가 observable이 아니라면 한번만 반영된다.
만약 여러분이 numer또는 string 과같은 형태의 것돠 다른 형태를 제공하고 싶다면 text 속성값은
yourParameter.toString()로 보여지게 될것이다.Additional parameters(추가 파리머티)
- None(없음)
참고 1: text 값을 결정하기 위해 함수와 Expression 사용하기
만약 여러분이 text값을 프로그램적으로 결정하고 싶다면, omputed observable을 생성하라 그리고 evaluator function을 사용하라
예
The item is <span data-bind="text: priceRating"></span> today.<script type="text/javascript"> var viewModel = { price: ko.observable(24.95) }; viewModel.priceRating = ko.computed(function() { return this.price() > 50 ? "expensive" : "affordable"; }, viewModel);</script> |
위의 예에서 text는 price 가 변경될때 “expensive” 와 “affordable”로 보여질것이다.
다른방법으로는 여러분은 computed observable을 만들필요없다. 만약 여러분이 단순히 위의 예제와 같은 값을 보여주고 싶다면 아래와 같이 써라
The item is <span data-bind="text: price() > 50 ? 'expensive' : 'affordable'"></span> today. |
위의 예는 기존것과 같은 결과를 보여준다.
참고2: HTML Encoding
바인딩을 사용하여 innerText 또는 textContent 의 속성값을 바꾼다면 HTML또는 script Injection에 안전하다. 예를 보자:
viewModel.myMessage("<i>Hello, world!</i>"); |
위의 코드는 이탤릭체 text를 렌더링하지 않고 단준히 <i>Hello, world!</i>문자열을 렌더링해준다.
여러분이 html의 컨텐츠로 렌더링 하고 싶다면 http://knockoutjs.com/documentation/html-binding.html를 참조하라.
참고 3: IE 6 공백
IE 6는 이상한 점이 있다 뭐냐면 때때로 빈 span 다음에 공백이 오면 무시하는 경우가 있다. Kockout에서는 직접적으로 뭔가 할수 없다 . 아래와 같이 여러분은 작성할 것이다:
Welcome, <span data-bind="text: userName"></span> to our web site. |
<span>다음에 공백이 왔으므로 IE6에서는 이공백을 무시할 것이다. 해결방법은 아래와 같다.
Welcome, <span data-bind="text: userName"> </span> to our web site. |
Dependencies(필요한 라이브러리)
Kockout cor 라이브러리