Purpose(목적)
if 바인딩은 어떤 부분의 markup을 어떠한 조건 값이나 표현이 true( non-null이아닌 객체 또는 빈값이 아닌 string같이 true같은것들)일때 document에 나타내게 합니다. if 바인딩은 visible바인딩과 같은 역할을 합니다.(http://knockoutjs.com/documentation/visible-binding.html)
visible과 차이점은 if바인딩은 항상 DOM에 markup을 포함하고 있습니다 그리고 적용된 data-bind특성을 가지고 있습니다. 반면 visible바인딩은 단지 CSS를 사용하여 container 요소들의 visibility만 토글하는 형식입니다. 그러나 if 바인딩은 물리적으로 포함된 markup들을 추가 또는 삭제를 합니다. 그리고 표현값들이 true일때만 바인딩들을 자손들에게 반영합니다.
Example 1
이번 예제에서는 동적으로 markup의 부분이 observable 값이 변경될때 추가되고 삭제되는것을 보여줍니다.
Source code: View
<label><input type="checkbox" data-bind="checked: displayMessage" /> Display message</label><div data-bind="if: displayMessage">Here is a message. Astonishing.</div> |
Source code: View model
ko.applyBindings({displayMessage: ko.observable(false)}); |
Example 2
다음예제에서는 <div>요소들이 "mercury"일때 비게 비게되고 "Earth"일때 나타나게 됩니다. 왜냐하면 Earth는 non-null capital속성을 가지는 반면 "Mercury"는 null 속성을 가지고 있기 때문입니다.
<ul data-bind="foreach: planets"><li>Planet: <b data-bind="text: name"> </b><div data-bind="if: capital">Capital: <b data-bind="text: capital.cityName"> </b></div></li></ul><script>ko.applyBindings({planets: [{ name: 'Mercury', capital: null }, { name: 'Earth', capital: { cityName: 'Barnsley' } } ]});</script> |
if바인딩이 어떻게 위의 코드를 작동시키는지 아는것은 매우 중요합니다. 그런지식없이 한다면 "Mercury" 문맥안에 capital.cityName의 값을 판단한때 error가 발생할것입니다. Javascript에서 여러분은 null또는 undefined의 서브 속성을 접근할수 없습니다.
Parameters(파라미터)
-
Main parameter(주파라미터)
판단하고 싶은 표현. 만약 값이 true이거나 true같은 값이면 포함된 markup은 document에 나타나게 될것입니다. 그리고 data-bind 특성도 적용되게 될것입니다. 만약 여러분의 표현식이 false라면 포함된 amrkup은 document에서 사라지고 바인딩 적용이 없을 것입니다. 만약 여러분의 표현식에 observable 값들을 포함한다면 표현식은 다시 매번 계산될것입니다.
-
Additional parameters(추가 파리머터)
- None(없음)
Note: container 요소 없이 "if"사용하기
어떨때는 container요소 없이 특정부분을 보여주고 안보여주고 하는 제어가 필요할때가 있습니다. 예를 들어 밑의 <li>요소가 두개 있는데 하나만 보여주고 안보여주고 싶을때말입니다.:
<ul><li>This item always appears</li><li>I want to make this item present/absent dynamically</li></ul> |
이러한 상황에서는 여러분은 <ul>에 if를 넣을 수 없게 됩니다. 그러면 첫번째 <li>에도 영향이 미치니까요 그럴때는 아래와 같이 주석태그를 사용하면 됩니다.
<ul><li>This item always appears</li><!-- ko if: someExpressionGoesHere --><li>I want to make this item present/absent dynamically</li><!-- /ko --></ul> |
<!-- ko --> 와<!-- /ko --> 주석은 시작과 끝의 표식과 같이 사용됩니다.
필요한 라이브러리
Knockout Core library.