Cara Pengikatan Acara Borang berfungsi dalam KnockoutJs
Kandungan ini pada asasnya adalah terjemahan bahan asal. Hasratnya adalah untuk mengetahui tentang KnockoutJs untuk Magento 2 dan mencipta kandungan dalam bahasa Portugis tentang KnockouJs.
Dokumentasi
- Sintaks pengikat data
- Konteks mengikat
- Ikatan "klik"
- Pengikat "acara"
- Ikatan "serahkan"
- Ikatan "dayakan" dan "lumpuhkan"
- Ikatan "nilai"
- Ikatan "textInput"
- Ikatan "hasFocus"
- Ikatan "ditanda"
- Ikatan "pilihan"
- Ikatan "Pilihan Terpilih"
- Ikatan "Nama unik"
Ikatan
Dalam KnockoutJs, binding ialah cara untuk menyambung logik ViewModel (data dan logik perniagaan) dengan View (HTML). Ringkasnya, melalui binding antara muka pengguna secara automatik mencerminkan perubahan dalam data anda, tanpa perlu memanipulasi DOM secara langsung.
Pengikatan dalam KnockoutJs berfungsi melalui atribut data-bind pada elemen HTML. Atribut ini ialah tempat anda menentukan pengikatan yang anda mahu gunakan dan nilai yang berkaitan.
Acara Borang
klik
Klik mengikat menambah pengendali acara supaya fungsi JavaScript yang dipilih digunakan apabila elemen DOM yang berkaitan diklik. Ini paling biasa digunakan pada elemen yang ditandakan
Setiap kali elemen diklik, ini akan menggunakan kaedah yang telah diluluskan dalam ViewModel, yang seterusnya mengubah keadaan ViewModel, yang menyebabkan UI menjadi dikemas kini.
<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript">
ko.applyBindings({
numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
});
</script>
Secara lalai, KnockoutJs akan menghalang acara klik daripada melakukan sebarang tindakan standard. Ini bermakna apabila menggunakan klik mengikat pada teg penyemak imbas hanya akan memanggil fungsi dan tidak menavigasi ke href pautan. Pengikatan klik untuk klik biasanya digunakan apabila anda menggunakan pautan sebagai sebahagian daripada UI yang memanipulasi ViewModel, bukan sebagai hiperpautan biasa ke halaman web lain. Jika tindakan klik standard perlu diteruskan, hanya kembalikan benar dalam fungsi.
Peristiwa
Peristiwa mengikat membenarkan anda menambah pengendali acara untuk acara tertentu supaya fungsi JavaScript pilihan anda digunakan apabila acara itu dicetuskan untuk elemen DOM yang berkaitan. Ini boleh digunakan untuk mengikat mana-mana acara seperti tekan kekunci, tuding tetikus atau keluar tetikus.
<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript">
ko.applyBindings({
numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
});
</script>
Hantar
mengikat serah *adalah arahan mengikat serah pada borang akan menghalang tindakan penyerahan lalai penyemak imbas untuk borang tersebut, dengan kata lain penyemak imbas akan memanggil fungsi pengendali, tetapi ia tidak akan hantar borang ke pelayan. Pengikatan *submit biasanya digunakan apabila borang digunakan sebagai antara muka kepada ViewModel, bukan sebagai bentuk HTML biasa. Jika borang itu perlu diserahkan sebagai borang HTML biasa, hanya kembalikan benar daripada pengendali penyerahan anda.
<div>
<div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
Mouse over me
</div>
<div data-bind="visible: detailsEnabled">
Details
</div>
</div>
<script type="text/javascript">
ko.applyBindings({
detailsEnabled: ko.observable(false),
enableDetails: function() {
this.detailsEnabled(true);
},
disableDetails: function() {
this.detailsEnabled(false);
}
});
</script>
Dayakan/Lumpuhkan
Dayamengikat menyebabkan elemen DOM yang berkaitan didayakan apabila nilai parameternya adalah benar. mengikat lumpuhkan berfungsi dengan cara yang bertentangan, menyebabkan elemen DOM yang berkaitan dilumpuhkan apabila nilainya benar.
<form data-bind="submit: doSomething">
<button type="submit">Submit</button>
</form>
<script type="text/javascript">
ko.applyBindings({
this.doSomething = function(formElement) {
// ... now do something
}
});
</script>
Nilai
Nilai mengikat *mengikat nilai elemen DOM yang dikaitkan dengan sifat dalam *ViewModel. Ini biasanya berguna dengan elemen bentuk seperti ,