Laksanakan kemahiran binding_javascript data dua hala js yang sangat mudah

Pengikatan data dua hala merujuk kepada keupayaan untuk mengikat perubahan dalam sifat objek kepada perubahan dalam antara muka pengguna, dan sebaliknya. Dalam erti kata lain, jika kami mempunyai objek pengguna dan atribut nama, setelah kami menetapkan nilai baharu kepada nama pengguna, nama baharu akan dipaparkan pada UI. Begitu juga, jika UI mengandungi kotak input untuk nama pengguna, memasukkan nilai baharu harus menyebabkan sifat nama objek pengguna berubah dengan sewajarnya.

Banyak pelanggan rangka kerja JS yang popular seperti Ember.js, Angular.js atau KnockoutJS telah melaksanakan pengikatan data dua hala dalam ciri terbaharu mereka. Ini tidak bermakna sukar untuk melaksanakannya dari awal, dan juga tidak bermakna menggunakan rangka kerja ini adalah satu-satunya pilihan apabila fungsi ini diperlukan. Idea di bawah sebenarnya sangat asas dan boleh dianggap sebagai pelan 3 langkah:

Kami memerlukan cara untuk mengikat elemen dan atribut UI antara satu sama lain
Kita perlu memantau perubahan dalam sifat dan elemen UI
Kita perlu menyedarkan semua objek dan elemen terikat tentang perubahan

Masih terdapat banyak cara untuk melaksanakan idea di atas Satu cara yang mudah dan berkesan ialah menggunakan mod PubSub. Ideanya mudah: kami menggunakan atribut data untuk mengikat kod HTML, dan semua objek JavaScript dan elemen DOM yang diikat bersama melanggan objek PubSub. Selagi objek JavaScript atau elemen input HTML mendengar perubahan data, peristiwa yang terikat pada objek PubSub akan dicetuskan dan objek serta elemen terikat lain akan membuat perubahan yang sepadan.

Gunakan jQuery untuk membuat pelaksanaan yang mudah

Untuk melanggan dan menerbitkan acara DOM, sangat mudah untuk melaksanakannya dengan jQuery Seterusnya, kami akan menggunakan Jquery, seperti berikut:

function DataBinder( object_id ) {
 // Use a jQuery object as simple PubSub
 var pubSub = jQuery({});
 // We expect a `data` element specifying the binding
 // in the form: data-bind-<object_id>="<property_name>"
 var data_attr = "bind-" + object_id,
  message = object_id + ":change";
 // Listen to change events on elements with the data-binding attribute and proxy
 // them to the PubSub, so that the change is "broadcasted" to all connected objects
 jQuery( document ).on( "change", "[data-" + data_attr + "]", function( evt ) {
 var $input = jQuery( this );
 pubSub.trigger( message, [ $input.data( data_attr ), $input.val() ] );
 });
 // PubSub propagates changes to all bound elements, setting value of
 // input tags or HTML content of other tags
 pubSub.on( message, function( evt, prop_name, new_val ) {
 jQuery( "[data-" + data_attr + "=" + prop_name + "]" ).each( function() {
  var $bound = jQuery( this );
  if ( $bound.is("input, textarea, select") ) {
  $bound.val( new_val );
  } else {
  $bound.html( new_val );
  }
 });
 });
 return pubSub;
}

Untuk pelaksanaan di atas, berikut ialah kaedah pelaksanaan termudah bagi model Pengguna:

function User( uid ) {
 var binder = new DataBinder( uid ),
  user = {
  attributes: {},
  // The attribute setter publish changes using the DataBinder PubSub
  set: function( attr_name, val ) {
   this.attributes[ attr_name ] = val;
   binder.trigger( uid + ":change", [ attr_name, val, this ] );
  },
  get: function( attr_name ) {
   return this.attributes[ attr_name ];
  },
  _binder: binder
  };
 // Subscribe to the PubSub
 binder.on( uid + ":change", function( evt, attr_name, new_val, initiator ) {
 if ( initiator !== user ) {
  user.set( attr_name, new_val );
 }
 });
 return user;
}

Sekarang jika kita ingin mengikat atribut model Pengguna pada UI, kita hanya perlu mengikat atribut data yang sesuai dengan elemen HTML yang sepadan.

// javascript
var user = new User( 123 );
user.set( "name", "Wolfgang" );
// html
<input type="number" data-bind-123="name" />

Dengan cara ini, nilai input akan dipetakan secara automatik kepada atribut nama objek pengguna, dan begitu juga sebaliknya

Sama. Pelaksanaan mudah ini selesai!

Tidak perlu pelaksanaan jQuery

Dalam kebanyakan projek hari ini, jQuery mungkin sudah digunakan, jadi contoh di atas boleh diterima sepenuhnya. Walau bagaimanapun, bagaimana jika kita perlu cuba pergi ke ekstrem yang lain dan juga menghapuskan pergantungan pada jQuery? Nah, ia tidak begitu sukar untuk dibuktikan (terutamanya kerana kami mengehadkan sokongan kepada IE 8 dan ke atas). Akhirnya, kami perlu melaksanakan PubSub tersuai menggunakan javascript biasa dan mengekalkan acara DOM:

function DataBinder( object_id ) {
 // Create a simple PubSub object
 var pubSub = {
  callbacks: {},
  on: function( msg, callback ) {
   this.callbacks[ msg ] = this.callbacks[ msg ] || [];
   this.callbacks[ msg ].push( callback );
  },
  publish: function( msg ) {
   this.callbacks[ msg ] = this.callbacks[ msg ] || []
   for ( var i = , len = this.callbacks[ msg ].length; i < len; i++ ) {
   this.callbacks[ msg ][ i ].apply( this, arguments );
   }
  }
  },
  data_attr = "data-bind-" + object_id,
  message = object_id + ":change",
  changeHandler = function( evt ) {
  var target = evt.target || evt.srcElement, // IE compatibility
   prop_name = target.getAttribute( data_attr );
  if ( prop_name && prop_name !== "" ) {
   pubSub.publish( message, prop_name, target.value );
  }
  };
 // Listen to change events and proxy to PubSub
 if ( document.addEventListener ) {
 document.addEventListener( "change", changeHandler, false );
 } else {
 // IE uses attachEvent instead of addEventListener
 document.attachEvent( "onchange", changeHandler );
 }
 // PubSub propagates changes to all bound elements
 pubSub.on( message, function( evt, prop_name, new_val ) {
 var elements = document.querySelectorAll("[" + data_attr + "=" + prop_name + "]"),
  tag_name;
 for ( var i = , len = elements.length; i < len; i++ ) {
  tag_name = elements[ i ].tagName.toLowerCase();
  if ( tag_name === "input" || tag_name === "textarea" || tag_name === "select" ) {
  elements[ i ].value = new_val;
  } else {
  elements[ i ].innerHTML = new_val;
  }
 }
 });
 return pubSub;
}

Model boleh kekal sama kecuali untuk memanggil kaedah pencetus jQuery dalam penetap. Memanggil kaedah pencetus akan digantikan dengan memanggil kaedah terbitkan PubSub tersuai kami dengan ciri berbeza:

// In the model's setter:
function User( uid ) {
 // ...
 user = {
 // ...
 set: function( attr_name, val ) {
  this.attributes[ attr_name ] = val;
  // Use the `publish` method
  binder.publish( uid + ":change", attr_name, val, this );
 }
 }
 // ...
}

Kami sekali lagi mencapai hasil yang kami inginkan dengan kurang daripada seratus baris JavaScript tulen yang boleh diselenggara.

Kandungan di atas ialah tutorial tentang pengikatan data dua hala js saya harap ia akan membantu semua orang.