Purpose(목적)
attr 바인딩은 해당 DOM요소에 어떤 특성 값을 설정하기위한 일반적인 방법을 제공해 줍니다. 예를들어 여러분들이 어떤 요소에 title 특성을 , img태그에 src, a 태그에 href에 view model의 값을 설정하려한다면 attr 바인딩은 매우 유용합니다. 그리고 model속성이 변경되면 자동적으로 해당 특성값이 변경됩니다.
Example
<a data-bind="attr: { href: url, title: details }"> Report</a><script type="text/javascript"> var viewModel = { url: ko.observable("year-end.html"), details: ko.observable("Report including final year-end statistics") };</script> |
위예는 href특성에 year-end.html그리고 title 특성에 Report including final year-end statistics 가설정됩니다.
Parameters
Main parameter(주 파라미터)
여러분은 반드시 해당 특성이름에 Javascript객체의 속성이름과 값들을 넘겨줘야합니다.
만약 여러분의 파라미터가 observable값이면 바인딩이 observable 값이 바뀔때마다 특성의 값을 자동적으로 변경해 줄겁니다. 만약 observable값을 참조하고 있지 않다면 한번만 변경이 될것입니다.
Additional parameters(추가 파라미터)
- None(없음)
참고: 올바라지 않은 JavaScript변수의 이름을 적용하기
만약 여러분이 data-something 특성에 어떤값을 바인딩 하려면 아래와 같이 작성하면 안됩니다.:
<div data-bind="attr: { data-something: someValue }">...</div> |
왜냐면 data-something 는 올바르지 않은 식별자 이름이기 때문입니다. 해결방법은 간단합니다. 식별자의 이름을 홋따옴표로 감싸면 됩니다. 예를 들면 아래와 같습니다.,
<div data-bind="attr: { 'data-something': someValue }">...</div> |
필요한 라이브러리
Knockout library Core