가벼운 편도 데이터 바인딩을위한 최상의 솔루션

Question

나는 변수 x가 여러 가지 이유로 바뀔 수있는 단일 페이지 응용 프로그램을 가지고 있습니다. DOM (아래 div)에 표시되는 값을 항상 javascript 변수의 값과 일치 시키길 원합니다.

각도와 같은 프레임 워크가 좋다고 생각하지만 더 가볍고 간단한 해결책을 찾고 있습니다. JQuery와 underscore.js를 페이지에서 사용하고 있습니다.

<script> 
    var x = 100 
    </script> 

    <div id="value_display">100</div> 

이상적으로 변수와 요소를 인수로 제공해야하는 곳이 이상적입니다. 예를 들면 :

bind(x,'#value_display') 

Answer 1

당신은 이상적으로 변수 이름과 인수로 요소의 ID를 제공함으로써, 관찰자 ​​패턴의 간단한 구현 (더 큰 프레임 워크)을 부탁드립니다.

bind() 함수를 정의한 경우 x을 반복적으로 폴링하여 변경되었는지 확인하는 것이 좋습니다. bind 다음과 같이 호출 할 수 있습니다 참고 :

bind('x','value_display'); 

동작하는 예제 :

var x = 100; 
 

 
function bind(varName, elementId){ 
 
    var lastValue; 
 
    function check(){ 
 
    if(lastValue !== window[varName]){ 
 
     lastValue = window[varName]; 
 
     document.getElementById(elementId).innerHTML = lastValue; 
 
    } 
 
    } 
 
    //poll for changes every 50 milliseconds 
 
    setInterval(check, 50); 
 
} 
 

 
//bind x to value_display 
 

 
bind('x','value_display'); 
 

 
//test function by changing x every 100th millisecond 
 

 
setInterval(function(){ 
 
    x = +new Date; 
 
    }, 
 
    100 
 
);

<div id="value_display"></div>

개인적으로

, 나는 폴링을 사용하여 이상 경량 게시자/가입자 모듈을 선호 함수에 의해 제어되기 위해서는 변수 x에 할당해야합니다 (일종의 setter). 관찰자 패턴이나 펍/서브 패턴을 연구하면 (큰) 프레임 워크 —보다 훨씬 적은 코드로 쉽게 구현할 수 있지만 폴링 방식만큼 가벼운 것은 아닙니다.

Answer 2

제 제안은 특수 클래스를 만들어 해당 변수를 캡슐화하는 것입니다. 그것은 매우 가벼운 솔루션 간격 및 가치를 지켜보고있다.

var ViewModel=function(selector){ 

    this.dom=document.querySelector(selector);//here DOM element 
    this.value=null; 

}; 

//method sets value 
ViewModel.prototype.set=function(value){ 

    if (value===this.value) 
    return;//the same value 

    this.value=value;//new value 


    this.dom.innerText=this.value; //most important changing in DOM 

}; 

//method gets value 
ViewModel.prototype.get=function(){ 

    return this.value; 

}; 

사용법 : jsFiddle에서

var x=new ViewModel("#selector"); 

x.set(100); 

확인 예 - .. 여기 좀 걸릴 수 있습니다이 없음 매우 간단한 해결책이있다 https://jsfiddle.net/maciejsikora/wrd14kwk/