Ikatan dua arah dari kerangka kerja MVVM, yaitu, ketika objek berubah, nilai elemen DOM yang relevan akan diubah secara otomatis. Sebaliknya, ketika elemen DOM berubah, nilai objek dapat diperbarui secara otomatis. Tentu saja, elemen DOM umumnya mengacu pada elemen input output.
1. Pertama, ikatan satu arah diimplementasikan, dan fungsi panggilan balik dipicu ketika nilai properti dari perubahan objek yang ditentukan.
2. Ikatan satu arah dapat menggunakan implementasi definisi yang baru ditambahkan (atau definisties) di ES5. Jika ES5 digunakan, itu ditakdirkan untuk tidak mendukung IE9. Untuk mencegah masalah loop mati rekursif, atribut asli perlu dipotong menjadi atribut pribadi untuk disimpan.
3. Masalah ruang lingkup yang timbul dari memanggil Defineproperty untuk mendefinisikan penutupan di loop. Untuk menyelesaikan masalah bahwa nilai objek variabel lingkup akan diambil ke nilai lari terakhir, tentukan lapisan tambahan fungsi penutupan yang disebut segera untuk meneruskan nilai.
4. Kami mendefinisikan fungsi getFn dan setFn untuk memicu saat properti mendapatkan dan mengatur. Fungsinya adalah membaca dan menulis properti pribadi __private dan memicu fungsi panggilan balik untuk memberi tahu lapisan UI untuk memperbarui antarmuka.
5. Setelah pengikatan satu arah diimplementasikan, pengikatan terbalik diimplementasikan, yaitu, lapisan UI Onchange memicu data pembaruan. Ini relatif mudah. Di DOM, perubahan nilai model dikaitkan dengan bindkey properti khusus, dan acara OnInput dipantau. Dibandingkan dengan Onchange, keuntungannya adalah bahwa ia dapat berubah secara real time tanpa menunggu di luar fokus. Selain itu, dapat dipicu dengan menempel klik kanan, menempel menu, menyeret teks ke dalam kotak teks, dll., Tanpa bintik-bintik buta sama sekali. Kerugiannya adalah bahwa itu hanya mendukung IE9 atau di atas, tetapi ada setara onpropertychange di bawah IE9 dan dapat digunakan atau kompatibel.
6. Ringkasan: Prinsip pengikatan dua arah tidak rumit. Kode keseluruhan tidak melebihi 50 baris, yang sangat sederhana. Namun, masih ada beberapa konten teknis. Berikut ini adalah kode lengkap. Jika Anda tidak ingin menggunakan kerangka kerja besar, Anda dapat menggunakannya. IE9 berikut tidak didukung. Jika Anda ingin mendukung IE9 berikut, Anda dapat menggunakan Avalon. Ini menggunakan VBS untuk merangkum Get and Set Accessor, yang cukup kuat.
html:
<Div id = "container"> <p> Nama: <input type = "text" bindkey = "username"> </p> <p> Usia: <input type = "text" bindkey = "usia"> </p> <v>
JS:
<script type="text/javascript"> window.Model={ userName:"windy", age:34, skill:["javascript","html","css","jquery","node"], } function bindingModel(model,changeCallback){ var propertiesMap={}; model .__ private = {}; function getFn (name) {var result = this .__ private [name] console.log ("get value:"+name+"="+hasil); hasil pengembalian; }; fungsi setfn (name, val) {if (this .__ private [name]! = val) {console.log ("Set Nilai:"+Name+"="+Val); ini .__ private [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;// init value propertiesMap[propName]={ get:function(){ return 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)} function bindingboth (model, dom) {dom.find ("[bindkey]"). Masing -masing (fungsi (item) {var key = $ (this) .attr ("bindkey"); $ (this) .val (model [key]); $ (ini). model [key] = $ (ini) .val ();})}); BINDINGMODEL (model, function (name, val) {var el = dom.find ("[bindkey ="+name+"]"); if (el.val ()! = val) {el.val (val);}}); } bindingboth (window.model, $ ("#container")) </script>Prinsip-prinsip dan kode implementasi di atas dari mekanisme pengikatan dua arah MVVM (disarankan) adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.