Kaedah ciptaan mengikat tersuai kalah mati kemahiran javascript

Ikhtisar

Selain daripada jenis pengikatan terbina dalam KO yang disenaraikan dalam artikel sebelumnya (seperti nilai, teks, dsb.), anda juga boleh membuat pengikatan tersuai.

Daftarkan pengendali pengikat anda

ko.bindingHandlers.yourBindingName = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called when the binding is first applied to an element
    // Set up any initial state, event handlers, etc. here
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called once when the binding is first applied to an element,
    // and again whenever any observables/computeds that are accessed change
    // Update the DOM element based on the supplied values here.
  }
}; 

Seterusnya anda boleh menggunakan ikatan tersuai pada mana-mana elemen dom:

<div data-bind="yourBindingName: someValue"> </div> 

Nota: Anda tidak perlu menyediakan panggilan balik init dan kemas kini dalam pengendali anda, anda boleh menyediakan salah satu.

kemas kini panggilan balik

Seperti namanya, apabila atribut pemantauan anda boleh diperhatikan dikemas kini, ko akan memanggil balik panggilan balik kemas kini anda secara automatik.

Ia mempunyai parameter berikut:

elemen: gunakan elemen dom terikat ini;

valueAccessor: Nilai atribut model terikat pada masa ini boleh diperolehi dengan memanggil valueAccessor() Memanggil ko.unwrap(valueAccessor()) boleh mendapatkan nilai boleh diperhatikan dan nilai biasa dengan lebih mudah;

allBindings: Semua nilai atribut terikat pada model pada elemen dom ini, contohnya, panggil callBindings.get('name') untuk mengembalikan nilai atribut nama terikat (jika ia tidak wujud, kembalikan tidak ditentukan), atau panggil allBindings.has(' name') menentukan sama ada nama terikat pada dom semasa;

viewModel : Dihentikan dalam Knockout.3x, anda boleh menggunakan bindingContext.$data atau bindingContext.$rawData untuk mendapatkan viewModel semasa

bindingContext: Mengikat konteks, anda boleh memanggil bindingContext.$data, bindingContext.$parent, bindingContext.$parents, dsb. untuk mendapatkan data

Lihat contoh seterusnya Anda mungkin mahu menggunakan ikatan boleh dilihat untuk mengawal keterlihatan elemen dan menambah kesan animasi. Dalam kes ini, anda boleh membuat pengikatan tersuai anda:

Anda kemudian boleh menggunakan pengikatan tersuai ini seperti ini:

ko.bindingHandlers.slideVisible = {
  update: function(element, valueAccessor, allBindings) {
    // First get the latest data that we're bound to
    var value = valueAccessor();
    // Next, whether or not the supplied model property is observable, get its current value
    var valueUnwrapped = ko.unwrap(value);
    // Grab some more data from another binding property
    var duration = allBindings.get('slideDuration') || 400; // 400ms is default duration unless otherwise specified
    // Now manipulate the DOM element
    if (valueUnwrapped == true)
      $(element).slideDown(duration); // Make the element visible
    else
      $(element).slideUp(duration);  // Make the element invisible
  }
}; 

<div data-bind="slideVisible: giftWrap, slideDuration:600">You have selected the option</div>
<label><input type="checkbox" data-bind="checked: giftWrap" /> Gift wrap</label>
<script type="text/javascript">
  var viewModel = {
    giftWrap: ko.observable(true)
  };
  ko.applyBindings(viewModel);
</script> 

init panggil balik

ko akan memanggil fungsi init anda untuk setiap elemen dom yang menggunakan pengikatan, ia mempunyai dua tujuan utama:

(1) Tetapkan keadaan permulaan untuk elemen dom;

(2) Daftar beberapa pengendali acara, contohnya: apabila pengguna mengklik atau mengubah suai elemen dom, anda boleh menukar status atribut pemantauan

ko akan menggunakan set parameter yang sama seperti panggilan balik kemas kini.

Melanjutkan dengan contoh sebelumnya, anda mungkin mahu slideVisible menetapkan keadaan keterlihatan elemen (tanpa sebarang kesan animasi) apabila halaman pertama kali dipaparkan dan kesan animasi dilaksanakan apabila ia berubah kemudian. Anda boleh mengikuti Begini caranya untuk melakukannya:

giftWrap dimulakan dan ditakrifkan sebagai palsu (ko.observable(false)).

ko.bindingHandlers.slideVisible = {
  init: function(element, valueAccessor) {
    var value = ko.unwrap(valueAccessor()); // Get the current value of the current property we're bound to
    $(element).toggle(value); // jQuery will hide/show the element depending on whether "value" or true or false
  },
  update: function(element, valueAccessor, allBindings) {
    // Leave as before
  }
}; 

Anda kini tahu cara menggunakan panggilan balik kemas kini untuk mengemas kini elemen DOM apabila nilai boleh diperhatikan berubah. Kami kini boleh menggunakan kaedah lain untuk melakukannya Contohnya, apabila pengguna melakukan tindakan, ia juga boleh menyebabkan nilai boleh diperhatikan anda dikemas kini, contohnya:

Kini anda boleh membaca dan menulis nilai yang boleh diperhatikan anda melalui pengikatan "fokus" elemen.

ko.bindingHandlers.hasFocus = {
  init: function(element, valueAccessor) {
    $(element).focus(function() {
      var value = valueAccessor();
      value(true);
    });
    $(element).blur(function() {
      var value = valueAccessor();
      value(false);
    });
  },
  update: function(element, valueAccessor) {
    var value = valueAccessor();
    if (ko.unwrap(value))
      element.focus();
    else
      element.blur();
  }
}; 

Kandungan di atas ialah kaedah untuk membuat pengikatan tersuai Kalah Mati yang dikongsi oleh editor.