KnockoutJs에서 양식 이벤트 바인딩이 작동하는 방식

이 콘텐츠는 기본적으로 원본 자료를 번역한 것입니다. Magento 2용 KnockoutJ에 대해 배우고 KnockouJ에 대한 포르투갈어 콘텐츠를 제작하려는 의도입니다.

선적 서류 비치

• 데이터 바인딩 구문
• 컨텍스트 바인딩
• "클릭" 바인딩
• "이벤트" 바인딩
• "제출" 바인딩
• 바인딩 "활성화" 및 "비활성화"
• "값" 바인딩
• "textInput" 바인딩
• "hasFocus" 바인딩
• "체크된" 바인딩
• "옵션" 바인딩
• "selectedOptions" 바인딩
• "uniqueName" 바인딩

---

바인딩

KnockoutJs에서 바인딩은 ViewModel의 논리(데이터 및 비즈니스 논리)를 View(HTML)과 연결하는 방법입니다. 즉, DOM을 직접 조작할 필요 없이 바인딩을 통해 사용자 인터페이스가 데이터의 변경 사항을 자동으로 반영합니다.

KnockoutJs의 바인딩은 HTML 요소의 data-bind 속성을 통해 작동합니다. 이 속성은 사용하려는 바인딩과 관련 값을 지정하는 곳입니다.

양식 이벤트

딸깍 하는 소리

바인딩 클릭은 연결된 DOM 요소를 클릭할 때 선택한 JavaScript 함수가 호출되도록 이벤트 핸들러를 추가합니다. 이는 <button>, <input> 태그가 지정된 요소에 가장 일반적으로 사용됩니다. 및 <a>이지만 실제로는 보이는 모든 DOM 요소에서 작동합니다. KnockoutJs는 현재 모델 값을 첫 번째 매개변수로 제공합니다.

요소를 클릭할 때마다 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 이벤트가 표준 작업을 수행하는 것을 방지합니다. 즉, <a> 태그에 결합 클릭을 사용하면 브라우저는 함수만 호출하고 링크의 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 요소의 값을 바인딩합니다. 이는 일반적으로 <input>, <select>와 같은 양식 요소에 유용합니다. 및 <텍스트 영역>.

사용자가 관련 양식 컨트롤의 값을 편집하면 해당 값이 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>

바인딩 값은 <options> string.

값뿐만 아니라 임의의 JavaScript 객체인 값을 읽고 쓸 수 있도록 허용합니다.

텍스트 입력

바인딩 textInput은 필드(<input> 또는 <textarea>)를 ViewModel 속성에 바인딩하여 ViewModel 속성 간에 양방향 업데이트를 제공합니다. 그리고 요소의 값입니다. 바인딩 textInput은 자동 완성, 드래그 앤 드롭, 클립보드 이벤트를 포함한 모든 유형의 사용자 입력에 대해 즉각적인 DOM 업데이트를 제공합니다.

<p>Login name: <input data-bind="value: userName" /></p>
<p>Password: <input type="password" data-bind="value: userPassword" /></p>

<script type="text/javascript">
        ko.applyBindings({
        userName: ko.observable(""),        // Initially blank
        userPassword: ko.observable("abc"), // Prepopulate
    });
</script>

바인딩 textInput은 기본적으로 사용자가 텍스트 상자에서 포커스를 이동할 때만 모델을 업데이트합니다. 바인딩 textInput은 키를 누를 때마다 또는 기타 텍스트 입력 메커니즘을 사용하여 모델을 즉시 업데이트합니다.

포커스 있음

바인딩 hasFocus는 DOM 요소의 포커스 상태를 ViewModel 속성에 바인딩합니다. ViewModel 속성이 true 또는 false로 설정되면 관련 요소가 집중되거나 집중되지 않는 양방향 연결입니다.

<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>

체크됨

체크된 바인딩은 체크 가능한 양식 컨트롤, 즉 체크박스(<input type='checkbox'>) 또는 라디오 버튼(<input type='radio'>)을 다음과 같이 바인딩합니다. ViewModel의 속성.

<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>

옵션

바인딩 옵션은 드롭다운 목록(<select>) 또는 다중 선택 목록(<select size='6'>)에 표시되어야 하는 옵션을 제어합니다. 이 링크는 <select> 요소 이외의 다른 요소와 함께 사용할 수 없습니다.

할당된 값은 배열(또는 관찰 가능한 배열)이어야 합니다. <선택> 그러면 배열의 각 항목에 대한 항목이 표시됩니다.

<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>

선택한 옵션

바인딩 selectedOptions는 다중 선택 목록에서 현재 선택된 요소를 제어합니다. 이는 <select> 그리고 옵션 링크입니다.

사용자가 다중 선택 목록에서 항목을 선택하거나 선택 취소하면 ViewModel의 배열에 해당 값이 추가되거나 제거됩니다. 마찬가지로 ViewModel의 관찰 가능한 배열이라고 가정하면 해당 배열에서 항목을 추가하거나 제거할 때마다 UI에서 해당 항목이 선택되거나 선택 취소됩니다. . 양방향 연결입니다.

<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>

고유 이름

바인딩 UniqueName은 바인딩된 DOM 요소에 비어 있지 않은 이름 속성이 있는지 확인합니다. DOM 요소에 name 속성이 없으면 이 연결은 속성을 제공하고 이를 고유한 문자열 값으로 설정합니다.

<p>Login name: <input data-bind="value: userName" /></p>
<p>Password: <input type="password" data-bind="value: userPassword" /></p>

<script type="text/javascript">
        ko.applyBindings({
        userName: ko.observable(""),        // Initially blank
        userPassword: ko.observable("abc"), // Prepopulate
    });
</script>

위 내용은 KnockoutJs에서 양식 이벤트 바인딩이 작동하는 방식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!