목적
visible 바인딩은 해당 요소를 여러분들이 바인딩한 값에 의해 보이고 안보이고 하는 기법입니다.
Example
<div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value.</div><script type="text/javascript"> var viewModel = { shouldShowMessage: ko.observable(true) // Message initially visible }; viewModel.shouldShowMessage(false); // ... now it's hidden viewModel.shouldShowMessage(true); // ... now it's visible again</script> |
Parameters
Main parameter(주 파라미터)
파라미터값이 false처럼 됐을때(예 false,0,null,undefined), 바인딩은 여러분의엘러먼트
.style.display을 none으로 바꿉니다. 이말은 즉 hidden으로 처리한다는 말이죠. 이 스타일은 여러분이 지정한 스타일보다 우선시 됩니다.파라미터 값이 true처럼 됐을때(예 true, non-null 객체, 객체 배열), 바인딩은 여러분의엘러먼트
.style.display의 값을 삭제합니다.즉 vibible처리를 한다는 얘기죠.참고: 여러분들이 CSS에서 지정한 스타일은 제대로 적용됩니다. (예
display:table-row요소는 바인딩과 함께 적용됩니다.).
만약 이 파라미터가 observable value이면, 바인딩은 그 값에 따라 자동적으로 visibility가 적용됩니다. 만약 이 파라미터가 observable이 아니면 한번만 에러먼트의 visibility를 적용하고 끝납니다.
Additional parameters(추가 파라미터)
- None(없음)
참고: 함수와 Expression으로 요소 visibility 제어할때
여러분은 JavaScript함수 또는 JavaScript Expression을 파라미터값으로 사용할수 있습니다. 만약 여러분이 그렇게 하면 KO는 여러분의 function을 구동하고 여러분의 expression의 값을 구할것입니다. 그리고 그 결과값으로 엘러먼트를 hidden처리할지 결정하기 됩니다.
For example,
<div data-bind="visible: myValues().length > 0"> You will see this message only when 'myValues' has at least one member.</div><script type="text/javascript"> var viewModel = { myValues: ko.observableArray([]) // Initially empty, so message hidden }; viewModel.myValues.push("some value"); // Now visible</script> |
Dependencies(필요한것)
Kockout core library만 필요.