MVVM 프레임 워크의 양방향 바인딩, 즉 객체가 변경되면 관련 DOM 요소의 값이 자동으로 변경됩니다. 반대로 DOM 요소가 변경되면 객체의 값을 자동으로 업데이트 할 수 있습니다. 물론 DOM 요소는 일반적으로 출력 입력 요소를 나타냅니다.
1. 첫째, 일원 바인딩이 구현되고 지정된 객체의 속성 값이 변경 될 때 콜백 함수가 트리거됩니다.
2. 일원 바인딩은 ES5에서 새로 추가 된 DefineProperty 구현 (또는 DefineProperties)을 사용할 수 있습니다. ES5를 사용하는 경우 IE9를 지원하지 않을 예정입니다. 재귀 데드 루프 문제를 방지하려면 원래 속성을 개인 속성으로 절단하여 저장해야합니다.
3. Loop의 폐쇄를 정의하기 위해 DefineProperty를 호출하여 발생하는 범위의 문제. 범위 변수 객체의 값이 마지막 실행 값으로 검색되는 문제를 해결하려면 즉시 호출 된 클로저 기능의 추가 계층을 정의하여 값을 전달하십시오.
4. 우리는 속성이 시작되고 설정 될 때 트리거하기 위해 getfn 및 setfn 함수를 정의합니다. 그 기능은 사유지 __- 프라이버시를 읽고 쓰고 콜백 함수를 트리거하여 UI 계층에 인터페이스를 업데이트하도록 알리는 것입니다.
5. 일원 바인딩이 구현 된 후, 역 바인딩이 구현됩니다. 즉, UI 층 OnChange는 업데이트 데이터를 트리거합니다. 이것은 비교적 쉽습니다. DOM에서 모델의 값 변경은 사용자 정의 속성 바인드 키와 관련이 있으며 OnInput 이벤트가 모니터링됩니다. OnChange와 비교할 때, 그 장점은 초점이 맞지 않고 실시간으로 변경 될 수 있다는 것입니다. 또한 오른쪽 클릭 붙여 넣기, 메뉴 붙여 넣기, 텍스트를 텍스트 상자 등으로 드래그하는 등의 사각 지대가 전혀 없으면 트리거 할 수 있습니다. 단점은 IE9 이상 만 지원하지만 IE9 아래에 동등한 onpropertyChange가 있으며 사용하거나 호환 될 수 있다는 것입니다.
6. 요약 : 양방향 바인딩의 원리는 복잡하지 않습니다. 전체 코드는 50 줄을 초과하지 않으므로 매우 간단합니다. 그러나 여전히 기술 내용이 여전히 있습니다. 다음은 완전한 코드입니다. 거대한 프레임 워크를 사용하지 않으려면 사용할 수 있습니다. 다음 IE9는 지원되지 않습니다. 다음 IE9를 지원하려면 Avalon을 사용할 수 있습니다. VBS를 사용하여 Get and Set Accessor를 캡슐화하여 매우 강력합니다.
HTML :
<div id = "컨테이너"> <p> 이름 : <input type = "text"bindkey = "username"> </p> <p> age : <input type = "text"bindkey = "age"> </p> <div>
JS :
<script type = "text/javaScript"> wind model .__ private = {}; 함수 getfn (이름) {var result = this .__ private [name] console.log ( "get value :"+name+"="+result); 반환 결과; }; 함수 setfn (이름, val) {if (this .__ private [name]! = val) {console.log ( "set value :"+name+"="+val); this .__ private [name] = val; if (changecallback) {changecallback (이름, val); }}}}; for (model) {if (model.hasownproperty (elem) && elem! = "__ private"&& typeof (model [elem])! = "function") {(function (propname, propvalue) {propname] = propvalue; // init value propertiesmap [propname] = get : get : get (get : get : get). getfn.call (this, propname)}, set : function (v) {return setfn.call (this, propname, v)}, // value : model [elem], // writable : true, enumerable : true, configable : true}) (elem, model [elem]); }} object.defineProperties (model, propertiesmap)} 함수 bindingBoth (model, dom) {dom.find ( "[bindkey]" "). 각 (함수 (item) {var key = $ (this) .attr ("bindkey "); $ (this) .val (model [key]); $ (this). Model [key] = $ (this) .val ()}; bindingModel (모델, 함수 (이름, val) {var el = dom.find ( "[bindkey ="+name+"]); if (el.val ()! = val) {el.val (val);}}); } bindingBoth (Window.Model, $ ( "#container") </script>MVVM 양방향 바인딩 메커니즘 (권장)의 위 원칙과 구현 코드는 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.