js에서 양방향 데이터 바인딩을 구현하는 방법-JS 튜토리얼-php.cn

js에서 양방향 데이터 바인딩을 구현하는 방법

一个新手

풀어 주다： 2017-10-11 10:28:13

원래의

2273명이 탐색했습니다.

Requirements

현재 프레임워크는 단방향 바인딩에서 무엇을 강조하며 양방향 바인딩은 무엇입니까?
- 단방향 데이터 바인딩: 먼저 템플릿을 작성한 다음 템플릿과 데이터(데이터가 백그라운드에서 올 수 있음)를 통합하여 HTML 코드를 형성한 다음 이 HTML 코드를 문서 흐름에 삽입한다는 의미입니다.
- 양방향 데이터 바인딩: 데이터 모델(모듈)과 뷰(뷰) 간의 양방향 바인딩입니다. 즉, 데이터 모델의 관련 데이터를 수정하든 뷰의 데이터를 수정하든 그에 따라 해당 데이터가 업데이트됩니다.

구현 원칙

가장 중요한 것은 이벤트 바인딩입니다.
- 뷰 레이어(View)에서 keyup 이벤트를 바인딩하여 데이터 모델을 업데이트할 수 있습니다.
- 객체 속성 설정이 다음과 같은 경우 데이터 모델의 Object.defineProperty() 메서드를 사용하여 set 메서드를 정의합니다. 트리거되면 뷰 레이어의 데이터도 수정됩니다.

Case Code

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body><input type="text" id="myinput" ><script>
    var input = document.getElementById("myinput");    
    var obj = {};    
    Object.defineProperty(obj, "input", {
        get: function () {
            return input.value;
        },
        set: function (val) {
            input.value = val;
            changeCallback(input.value);
        }
    });

    input.onkeyup = function () {
        obj.input = input.value;
    };    function changeCallback(val) {
        console.log("这里是不管view层，还是module层修改后的回调，最后设置的值是"+val);
    }</script></body></html>

로그인 후 복사

Idea

먼저 Object.defineProperty() 메서드를 사용하여 obj의 입력 속성이 수정되는 한 이 설정 메서드가 트리거되고, 그러면 콜백이 트리거됩니다. 이는 모듈 계층에서 구현된 데이터 바인딩입니다.
그런 다음 keyup 이벤트를 입력에 바인딩하여 뷰 레이어 바인딩을 실현합니다.
둘 사이에 하나의 수정만 있으면 input 값이나 obj의 입력 속성에 관계없이 가장 최근에 수정된 값을 가져옵니다.
가장 간단한 아이디어여야 합니다.

위 내용은 js에서 양방향 데이터 바인딩을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!