본문 바로가기

Javascript/Knockout

The "enable" binding

Purpose(목적)

enable 바인딩은 해당 DOM소요를 파라미터 값이 true일때 enable시킵니다. 이러한 기능은 input, select, textarea와 같은 요소들에게 매우 유용합니다.

Example

<p>
    <input type='checkbox' data-bind="checked: hasCellphone" />
    I have a cellphone
</p>
<p>
    Your cellphone number:
    <input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone" />
</p>
 
<script type="text/javascript">
    var viewModel = {
        hasCellphone : ko.observable(false),
        cellphoneNumber: ""
    };
</script>

위의 예에서  “Your cellphone number” 텍스트박스는 초기화 될때 disable됩니다. 사용자가  “I have a cellphone” 체크박스를 체크할때 이 텍스트 박스는 enable됩니다.

Parameters(파라미터)

  • Main parameter(주파라미터)

    해당 DOM요소가 enable되야할지 안되야할지를 결정하는 값.

    bool 타입 값이 아닌 값들이 아닌경우 bool타입으로 변환 됩니다. 예를 들면 0과 nullfalse로 취급되고 21non-nulltrue로 취급됩니다.

    만약 여러분의 파라미터가 observable 값을 참조하고 있다면 enable/disable은 그 상태에 따라 자동으로 바뀌게 될것입니다. 만약 파라미터가 어떤 observable 값도 참조하고 있지않다면 한번만 셋팅이 되고 변경이 없을 것입니다.

  • Additional parameters(추가 파라미터)

    • None(없음)

Note: 임의의 JavaScript Expression사용하기

여러분은 변수들을 참조하는게 뿐만아니라 다른 표현식을 참조할수 있습니다. 아래의 예제를 보세요,

<button data-bind="enable: parseAreaCode(viewModel.cellphoneNumber()) != '555'">
    Do something
</button>

필요한 라이브러리

Knockout Kore library.