목적
visible 바인딩은 해당 요소를 여러분들이 바인딩한 값에 의해 보이고 안보이고 하는 기법입니다.
<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> |
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(추가 파라미터)
여러분은 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> |
Kockout core library만 필요.
