MVVMフレームワークの双方向結合、つまりオブジェクトが変更されると、関連するDOM要素の値が自動的に変更されます。それどころか、DOM要素が変更されると、オブジェクトの値を自動的に更新できます。もちろん、DOM要素は通常、出力入力要素を指します。
1.最初に、一方向のバインディングが実装され、指定されたオブジェクトのプロパティ値が変更されると、コールバック関数がトリガーされます。
2。一方向の結合は、ES5で新しく追加されたDefinePropertyの実装（または定義プロパティ）を使用できます。 ES5を使用している場合、IE9をサポートしないように運命づけられます。再帰的なデッドループの問題を防ぐために、元の属性を保存するためにプライベート属性にカットする必要があります。
3.ループ内の閉鎖を定義するために定義を定義することから生じる範囲の問題。スコープ変数オブジェクトの値が最後の実行値に取得されるという問題を解決するために、値を渡すためにすぐに呼び出される追加の閉鎖関数のレイヤーを定義します。
4. getFNおよびsetFN関数を定義して、プロパティが取得および設定されたときにトリガーします。その機能は、私有財産の読み取りと書き込み__ __を__privateし、コールバック関数をトリガーしてUIレイヤーに通知してインターフェイスを更新することです。
5.一方向結合が実装された後、逆バインディングが実装されます。つまり、UI層のオンチェンジが更新データをトリガーします。これは比較的簡単です。 DOMでは、モデルの値の変更はカスタムプロパティBindkeyに関連付けられており、OnInputイベントが監視されます。 Onchangeと比較して、それの利点は、焦点を合わせることを待つことなくリアルタイムで変化する可能性があることです。さらに、右クリック貼り付け、メニュー貼り付け、テキストのドラッグテキストボックスなど、ブラインドスポットがまったくないことでトリガーできます。欠点は、IE9以上のみをサポートしていることですが、IE9以下に同等のオンプロパティチャンジがあり、使用または互換性があります。
6.概要：双方向結合の原理は複雑ではありません。全体のコードは50行を超えていませんが、これは非常に簡単です。ただし、まだいくつかの技術的なコンテンツがあります。以下は完全なコードです。巨大なフレームワークを使用したくない場合は、使用できます。次のIE9はサポートされていません。次のIE9をサポートする場合は、Avalonを使用できます。 VBSを使用して、Get and Set Accessorをカプセル化します。これは非常に強力です。
HTML：
<div id = "container"> <p> name：<入力タイプ= "テキスト" bindkey = "username"> </p> <p> age：<input type = "text" bindkey = "age"> </p> <div>
JS：
<script type = "text/javascript"> window.model = {username： "windy"、age：34、skill：["javascript"、 "html"、 "css"、 "jquery"、 "node"]、} function bindingmodel（model、changecallback）{var propertiesmap = {};モデル.__プライベート= {}; function getfn（name）{var result = this .__ private [name] console.log（ "get value："+name+"="+result）;返品結果; }; function setfn（name、val）{if（this .__ private [name]！= val）{console.log（ "set value："+name+"="+val）;この.__プライベート[name] = val; if（changecallback）{changecallback（name、val）; }}}}; for（elem in model）{if（model.hasownproperty（elem）&& elem！= "__ private" && typeof（model [elem]）！= "function"）{（function（propname、propvalue）{model .__ private [propname] = propvalue; getfn.call（this、propname）}、set：function（v）{return setfn.call（this、propname、v）}、// value：model [elem]、// writable：true、enumerable：true、configurable：true}}）（elem、model [elem]）; }} object.defineProperties（model、propertiesmap）} function bindingboth（model、dom）{dom.find（ "[bindkey]"）。各（var key）{var key = $（this）.attr（ "bindkey"）; $（this）.val（model [key]）;モデル[key] = $（this）.val（）}）; BindingModel（model、function（name、val）{var el = dom.find（ "[bindkey ="+name+"]"）; if（el.val（）！= val）{el.val（val）;}}）; } bindingboth（window.model、$（ "＃container"））</script>MVVMの双方向結合メカニズム（推奨）の上記の原則と実装コードは、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。