KnockoutJs에서 양식 이벤트 바인딩이 작동하는 방식
- Barbara Streisand원래의
- 2024-11-26 10:58:09989검색
이 콘텐츠는 기본적으로 원본 자료를 번역한 것입니다. Magento 2용 KnockoutJ에 대해 배우고 KnockouJ에 대한 포르투갈어 콘텐츠를 제작하려는 의도입니다.
선적 서류 비치
- 데이터 바인딩 구문
- 컨텍스트 바인딩
- "클릭" 바인딩
- "이벤트" 바인딩
- "제출" 바인딩
- 바인딩 "활성화" 및 "비활성화"
- "값" 바인딩
- "textInput" 바인딩
- "hasFocus" 바인딩
- "체크된" 바인딩
- "옵션" 바인딩
- "selectedOptions" 바인딩
- "uniqueName" 바인딩
바인딩
KnockoutJs에서 바인딩은 ViewModel의 논리(데이터 및 비즈니스 논리)를 View(HTML)과 연결하는 방법입니다. 즉, DOM을 직접 조작할 필요 없이 바인딩을 통해 사용자 인터페이스가 데이터의 변경 사항을 자동으로 반영합니다.
KnockoutJs의 바인딩은 HTML 요소의 data-bind 속성을 통해 작동합니다. 이 속성은 사용하려는 바인딩과 관련 값을 지정하는 곳입니다.
양식 이벤트
딸깍 하는 소리
바인딩 클릭은 연결된 DOM 요소를 클릭할 때 선택한 JavaScript 함수가 호출되도록 이벤트 핸들러를 추가합니다. 이는
요소를 클릭할 때마다 ViewModel에 전달된 메소드가 호출되어 ViewModel의 상태가 변경되어 UI가 다음과 같이 변경됩니다. 업데이트되었습니다.
<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript">
ko.applyBindings({
numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
});
</script>
기본적으로 KnockoutJs는 click 이벤트가 표준 작업을 수행하는 것을 방지합니다. 즉, 태그에 결합 클릭을 사용하면 브라우저는 함수만 호출하고 링크의 href로 이동하지 않습니다. 클릭 투 클릭 바인딩은 일반적으로 다른 웹 페이지에 대한 일반 하이퍼링크가 아닌 ViewModel을 조작하는 UI의 일부로 링크를 사용할 때 사용됩니다. 표준 클릭 동작을 계속해야 하는 경우 함수에서 true를 반환하면 됩니다.
이벤트
바인딩 이벤트를 사용하면 지정된 이벤트에 대한 이벤트 핸들러를 추가하여 연결된 DOM 요소에 대해 해당 이벤트가 실행될 때 선택한 JavaScript 함수가 호출되도록 할 수 있습니다. 이는 키 누름, 마우스 호버 또는 마우스 종료와 같은 모든 이벤트에 바인딩하는 데 사용할 수 있습니다.
<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript">
ko.applyBindings({
numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
});
</script>
제출하다
바인딩 submit *은 양식의 제출 바인딩 지시문으로, 해당 양식에 대한 브라우저의 기본 제출 작업을 방지합니다. 즉, 브라우저는 핸들러 기능을 호출하지만 그렇지 않습니다. 양식을 서버로 보냅니다. *submit 바인딩은 일반적으로 양식이 일반 HTML 양식이 아닌 ViewModel에 대한 인터페이스로 사용될 때 사용됩니다. 양식을 일반 HTML 양식으로 제출해야 하는 경우 제출 핸들러에서 true를 반환하면 됩니다.
<div>
<div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
Mouse over me
</div>
<div data-bind="visible: detailsEnabled">
Details
</div>
</div>
<script type="text/javascript">
ko.applyBindings({
detailsEnabled: ko.observable(false),
enableDetails: function() {
this.detailsEnabled(true);
},
disableDetails: function() {
this.detailsEnabled(false);
}
});
</script>
활성화/비활성화
바인딩 활성화를 사용하면 해당 매개변수 값이 true일 때 연결된 DOM 요소가 활성화됩니다. 바인딩 disable은 반대 방식으로 작동하여 해당 값이 true인 경우 연결된 DOM 요소가 비활성화됩니다.
<form data-bind="submit: doSomething">
<button type="submit">Submit</button>
</form>
<script type="text/javascript">
ko.applyBindings({
this.doSomething = function(formElement) {
// ... now do something
}
});
</script>
값
바인딩 값 *은 *ViewModel의 속성과 연결된 DOM 요소의 값을 바인딩합니다. 이는 일반적으로 ,
사용자가 관련 양식 컨트롤의 값을 편집하면 해당 값이 ViewModel에서 업데이트됩니다. 마찬가지로 ViewModel이 값을 업데이트하면 화면의 양식 컨트롤 값도 업데이트됩니다.
<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">
ko.applyBindings({
hasCellphone : ko.observable(false),
cellphoneNumber: ""
});
</script>
바인딩 값은
텍스트 입력
바인딩 textInput은 필드( 또는