js에서 양방향 데이터 바인딩을 구현하는 방법
- 一个新手원래의
- 2017-10-11 10:28:132308검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!