본문 바로가기

Javascript/Knockout

The "submit" binding


Purpose(목적)

submit 바인딩은 해당 DOM요소가 submit될때 호출될 이벤트 핸들러를 추가합니다.일반적으로 여러분은 form여소에 사용하길 원할것입니다.

form에서 submit바인딩을 사용할때 Kockout은 form의 기본적인 submit 엑센을 방지합니다. 다시말해서 브라우저는 여러분이 추가한 핸들러를 호출하고 기본적으로 form요소의 엑센을 호출하지 않습니다. 이러한 설정은 submit바인딩을 사용할때 기본적인 설정입니다.  만약 여러분이 정상적인 HTML form을 submit하기 원한다면 단지 submit핸들러에 true를 리턴해 주세요.

Example

<form data-bind="submit: doSomething">
    ... form contents go here ...
    <button type="submit">Submit</button>
</div>
 
<script type="text/javascript">
    var viewModel = {
        doSomething : function(formElement) {
            // ... now do something
        }
    };
</script>

이 예제에서 설명했던것처럼 KO는 핸들러의 첫 파라미터로 form 요소를 전달합니다. 여러분은 이 파라미터를 무시할수 있습니다. 

submit 버튼에 click핸들러를 설정하면 어떤가요?

form에 submit 대신 여러분은 submit 버튼에 click이벤튼 핸들러를 사용할수 있습니다. 그러나 submit 바인딩을 사용하는것은 click보다 이점이 있습니다. 예를들어 텍스트 박스에 검색어를 넣고 엔터키 눌렀을때 form submit을 한다든지 이럴때에는 참 유용합니다.

Parameters(파라미터)

  • Main parameter(메인 파라미터)

    요소에 submit 이벤트를 바인딩하기 원하는 함수

    여러분은 어떤 Javascript함수도 참조할수 있습니다. - 이 말은 꼭 view model의 함수만을 가르키는 건 아닙니다. 

    여러분은 어떤 객체의 함수를 참조할수 있습니다. 예는 아래와 같습니다.

    submit: someObject.someFunction.

    view model에 함수들은 조금 특별합니다. 왜냐면 여러분들은 그 함수를 이름으로 참조하기 때문입니다. 예를 들어 여러분은 submit doSomething 이렇게 작성할수 있고  submit: viewModel.doSomething  게 할필요가 없습니다.

  • Additional parameters(추가 파라미터)

    • None(없음)

Notes

추가적은 파라미터를 submit핸들러 함수에 추가하고 싶으면 click binding을 참조해 주세요 원리는 같습니다.

필요한 라이브러리

Knockout Core library.