Javascript 양방향 데이터 바인딩, 프레임 워크가 아닙니다.

Question

저는 순수한 자바 스크립트에서 데이터 바인딩을 이해하려고합니다. 입력을 만들고 'input'과 같은 이벤트 리스너를 연결 한 다음 div의 innerHTML을 해당 새 입력 값으로 바꾸는 함수를 호출하면 div는 입력 할 때 입력 상자를 미러링합니다.

누군가 입력하지 않고 입력 상자의 값이 변경되면 div를 업데이트하려고합니다. 그래서 만약 입력이 때문에 일부 코드의 변경했다 :

는

inp.value = 'Testing' 

대신 사람이 직접 내부에 입력, 나는 아직도 그것을 거울에 사업부 내에서 텍스트를하고 싶습니다.

'change'이벤트 수신기로 시도했지만 입력 상자가 포커스를 잃을 때만 작동합니다. 그래서 코드에 추가해 보았습니다.

inp.focus(); 
inp.value = 'Testing'; 
inp.blur(); 

하지만 작동하지 않습니다. https://jsfiddle.net/mmpal78/7g0vqwgh/1/

내가 할 수있는 방법이어야가 추측하고있다 :
여기 내 jsfiddle에 대한 링크입니다. 감사.

Answer 1

따라서 입력이 때문에 일부 코드의 변경 인 경우 :

inp.value = 'Testing' 

대신 사람이 직접 내부에 입력, 나는 아직도 그것을 거울에 사업부 내에서 텍스트를하고 싶습니다. 당신은 할 수 없습니다

는 value가 그런 식으로 설정되어,도 아니다 MutationObserver 보고서에 아무것도 볼 때 어떤 이벤트가 발생하지 있습니다.

대신, 당신도

• 은 (단지 정책 것 같은) 직접 액세스를 금지하고 모든 설정이 (당신의 프레임 워크는 value 변경의 영향을받는 아무것도 업데이트가 다음과) 귀하의 프레임 워크를 통해 이동합니다. KO는 당신이 "obervables"를 통해 일함으로써 이것을합니다. 또는
• 이벤트 처리를 마쳤을 때와 같이 적절한 시간을 고려하여 업데이트하십시오. 처리 한 최신 값 value을 저장 한 다음 현재 value과 비교하여 확인하십시오. 각도 1은 그런 것을했습니다. 또는
• value의 코드가 value의 영향을받는 것으로 알고있는 내용을 명시 적으로 업데이트하십시오. 그러나 축척은 변경되지 않습니다. 은입니다.

Answer 2

나는 약간 늦은 것 같지만 어쨌든 대답을 게시합니다.

먼저 양방향 데이터 바인딩이 아니라 양방향 데이터 바인딩이 변수 값을 변경하면 요소의 값이 변경되고 반대의 경우도 마찬가지입니다.

구조를 사용하여 원하는 어느 곳에서나 사용할 수 있도록 제안합니다. 약간 복잡하지만 약간의 시간을 들여 연장 할 수있는 작업에 대한이 간단한 예를 살펴보십시오. : 새로운 VAR를 만들려면 생성자 create, bind, set 및 get의

var variable=function(){ 
    this.variables={}; 
} 

는 다음 프로토 타입 (방법)를 만들 : DEMO

먼저 당신은 당신의 생성자를 만들 iable는 요소에 바인딩 설정하거나 변수의 값을 변경하고 마지막 변수의 값을 얻을 :

variable.prototype.create=function(name){ 
    this.variables[name]={ 
    elem:'', 
    value:'', 
    event:new Event(name+'Change') 
    }; 
} 
variable.prototype.bind=function(name,element){ 
    this.variables[name].elem=document.querySelector(element); 
} 
variable.prototype.set=function(name,val){ 
    this.variables[name].value=val; 
    this.variables[name].elem.dispatchEvent(this.variables[name].event); 
} 
variable.prototype.get=function(name){ 
    return this.variables[name].value; 
} 

은 당신이 당신의 구조의 인스턴스를 만들 :

var binding=new variable(); 

만들 당신의 변수와 입력 요소에 바인딩 :

: 당신이 당신의 입력의 값의 변화에 ​​대한 이벤트 리스너를 설정 한 후

binding.create('myVar'); 
binding.bind('myVar','.input'); 

document.querySelector('.input').addEventListener('input',function(){ 
    binding.set('myVar',this.value); 
}); 

마지막으로 버튼의 클릭에 변수의 값을 변경 : 16,

document.querySelector('.input').addEventListener('myVarChange',function(){ 
    this.value=binding.get('myVar'); 
    document.querySelector('#div1').innerHTML=binding.get('myVar'); 
}); 

그때 우리는 변수에 텍스트 설정은 사용자가 입력하면

document.querySelector('#btn1').addEventListener('click',function(){ 
    binding.set('myVar','test'); 
});