Panduan Pemula untuk Knockoutjs: Bahagian 2

3

Kunci Takeaways

KnockoutJS menawarkan pelbagai pengikatan terbina dalam yang memudahkan proses menghubungkan elemen UI ke model data, menjadikannya mudah untuk membuat UI dinamik dan responsif.

Pengikatan teks dan nilai dalam knockoutjs memudahkan data dua hala yang mengikat untuk elemen HTML, secara automatik mengemas kini UI apabila model data berubah dan sebaliknya.

KnockoutJS termasuk pengikatan acara seperti `klik` dan` hantar`, yang membolehkan pemaju menambah tingkah laku kepada elemen UI tanpa memerlukan pengendalian acara manual, menyelaraskan proses pembangunan.

Perpustakaan menyokong pengikatan bersyarat dan gaya seperti `Look`,` Enable`, dan `CSS`, membolehkan pemaju untuk mengawal penglihatan elemen dan gaya dinamik berdasarkan keadaan model data.

• Ciri -ciri lanjutan seperti pengikatan `Options` untuk senarai dropdown dan pengikatan` diperiksa` untuk kotak semak dan butang radio menyediakan alat yang mantap untuk mengendalikan elemen bentuk yang lebih kompleks dalam UI.
• Panduan Pemula untuk Knockoutjs: Bindings
• Knockout menyediakan satu set keseluruhan pengikatan terbina dalam yang berguna untuk tugas dan senario yang paling biasa. Setiap pengikatan ini membolehkan anda mengikat nilai data mudah atau menggunakan ungkapan JavaScript untuk mengira nilai yang sesuai. Ini memberikan banyak kelonggaran dan menjadikannya mudah untuk mewujudkan UI yang sangat dinamik dengan usaha minimum.
• Sintaks untuk menggunakan pengikatan terbina dalam adalah untuk memasukkan nama mengikat kalah mati dan pasangan model paparan pasangan di dalam atribut mengikat data elemen HTML.
Jika anda ingin mengikat data ke lebih daripada satu harta dalam elemen HTML, hanya memisahkan pengikatan dengan koma menggunakan sintaks ini:

Anda harus ingat bahawa sebahagian besar pengikat cuba untuk menukar mana -mana parameter ke nilai boolean. Jika anda memberikan nilai yang sebenarnya tidak boolean, ia akan ditafsirkan secara longgar sebagai kebenaran atau palsu. Ini bermakna nombor nonzero dan objek bukan null dan rentetan yang tidak kosong akan ditafsirkan sebagai benar, sedangkan sifar, null, undefined, dan rentetan kosong akan ditafsirkan sebagai palsu.

Jika anda memahami cara menggunakan satu jenis data yang mengikat, maka yang lain harus cukup mudah untuk dipelajari. Sekarang kita akan menerangkan setiap satu daripada mereka dengan memberikan keterangan dan contoh pendek.

pengikatan mudah

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

Kami telah melihat teks mengikat ketika berurusan dengan pemerhatian dalam tutorial sebelumnya. Ia menetapkan teks elemen yang berkaitan dengan nilai parameter anda. Ini adalah bersamaan dengan menetapkan innertext (untuk IE) atau teksten (untuk pelayar lain) harta elemen DOM. Jika parameter anda adalah sesuatu yang lain daripada nombor atau rentetan maka pengikatan akan memberikan hasil toString () ke elemen.

Jika parameter ini adalah nilai yang dapat dilihat, pengikatan akan mengemas kini teks elemen apabila nilai berubah. Jika parameter tidak dapat dilihat, ia hanya akan menetapkan teks elemen sekali dan tidak akan mengemas kini lagi kemudian. Ini sah untuk semua pengikatan.

Pengikatan teks sering digunakan untuk memaparkan nilai dalam elemen rentang atau div. Apabila ia digunakan, mana -mana teks terdahulu akan ditimpa.

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

Pengikatan nilai menetapkan nilai elemen yang berkaitan dengan nilai parameter anda. Ini biasanya digunakan untuk elemen borang seperti input, pilih dan teks. Apabila pengguna menyunting nilai dalam kawalan borang yang berkaitan, ia mengemas kini nilai pada model pandangan anda. Begitu juga, apabila anda mengemas kini nilai dalam model pandangan anda, ini mengemas kini nilai kawalan borang pada skrin. Ini dikenali sebagai mengikat dua hala. Jika parameter anda adalah sesuatu yang lain daripada nombor atau rentetan maka pengikatan akan memberikan hasil toString () ke elemen.

Secara lalai, knockout mengemas kini model paparan anda apabila pemindahan pengguna memberi tumpuan kepada node DOM yang lain, pada acara Perubahan, tetapi anda boleh mengawal apabila nilai dikemas kini menggunakan parameter ValueUpdate yang diterangkan di bawah. Jika mengikat anda juga termasuk parameter yang dipanggil ValueUpdate, ini mentakrifkan knockout acara pelayar yang harus digunakan untuk mengesan perubahan.

"Tukar" adalah peristiwa lalai dan ia mengemas kini model pandangan anda apabila pengguna menggerakkan fokus ke kawalan yang berbeza, atau dalam kes elements, sejurus selepas sebarang perubahan.

"Afterkeydown" - mengemas kini model pandangan anda sebaik sahaja pengguna mula menaip watak. Ini berfungsi dengan menangkap acara Keydown penyemak imbas dan mengendalikan acara secara tidak segerak. Jika anda ingin mengekalkan model pandangan anda dikemas kini dalam masa nyata menggunakan "Afterkeydown" akan menjadi pilihan terbaik.

"keyup" - mengemas kini model pandangan anda apabila pengguna mengeluarkan kunci

"KeyPress" - mengemas kini model pandangan anda apabila pengguna telah menaip kunci. Kemas kini ini berulang kali jika pengguna memegang kunci ke bawah

<span data-bind="text: msg, visible: toggle"></span>

Kawalan Mark Up

Pengikatan HTML tidak digunakan seringkali, tetapi ia sangat berguna untuk memberikan kandungan HTML dalam model pandangan anda. Pengikatan ini menetapkan HTML elemen yang berkaitan dengan nilai parameter anda dan bersamaan dengan menetapkan harta innerHTML pada elemen DOM. Jika parameter anda adalah sesuatu yang lain daripada nombor atau rentetan maka pengikatan akan memberikan hasil toString () ke elemen.

Oleh kerana pengikatan ini menetapkan kandungan elemen anda menggunakan innerHTML, anda harus berhati -hati untuk tidak menggunakannya dengan nilai model yang tidak dipercayai, kerana itu mungkin membuka kemungkinan serangan suntikan skrip. Sekiranya anda tidak dapat menjamin bahawa kandungan itu selamat untuk dipaparkan, maka anda boleh menggunakan teks yang mengikat sebaliknya.

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

Walaupun knockout mempunyai banyak pengikatan terbina dalam, anda pasti akan menghadapi beberapa situasi yang tidak ada. Bagi mereka, Knockout menawarkan pengikatan ATTR, yang membolehkan anda mengikat sebarang atribut kepada harta model pandangan. Parameter harus menjadi objek JavaScript di mana nama harta adalah atribut dan nilai harta adalah nilai yang akan terikat kepada atribut. Ini sangat berguna dalam banyak senario biasa, seperti mengikat HREF dan tajuk elemen A atau SRC dan alt elemen IMG.

<span data-bind="text: msg, visible: toggle"></span>

Tambah Styling

anda boleh mengikat gaya dengan kalah mati menggunakan CSS dan gaya bindings terbina dalam.

CSS mengikat menetapkan satu atau lebih kelas CSS untuk elemen yang berkaitan. Parameter harus menjadi objek JavaScript di mana nama harta sesuai dengan kelas CSS yang dikehendaki dan nilai harta yang dinilai kepada benar atau palsu yang menunjukkan sama ada kelas harus digunakan. Anda boleh menetapkan beberapa kelas CSS sekaligus.

<p>The tip of the day is: <span data-bind="text: tipOfTheDay"></span></p> 

function viewModel() {
 var self = this;
 self.tipOfTheDay = ko.observable('Relax.Take it easy!')
};
ko.applyBindings(new viewModel());

anda boleh menggunakan ungkapan untuk menentukan bila kelas akan digunakan.

<input data-bind="value: name, valueUpdate: 'afterkeydown'"></input>
<p data-bind="text: name"></p>

function viewModel() {
 var self = this;
 self.name = ko.observable()
};
ko.applyBindings(new viewModel());

Walaupun lebih baik menggunakan kelas CSS apabila mungkin, kadang -kadang anda mungkin mahu menetapkan gaya tertentu juga. Knockout menyokong ini dengan gaya terbina dalam gaya yang menetapkan satu atau lebih nilai gaya untuk elemen yang berkaitan. Parameter harus menjadi objek yang sifatnya sesuai dengan nama gaya CSS, dan nilai -nilai sesuai dengan nilai gaya yang ingin anda gunakan. Biasanya nilai parameter ini diisytiharkan menggunakan JSON.

<div data-bind="html: markup"></div>

function viewModel() {
 var self = this;
 self.markup = ko.observable('<p><strong>Knockout</strong> is so <em>cool</em>!</p>')
};
ko.applyBindings(new viewModel());

Nota: Apabila anda mempunyai kelas atribut atau CSS yang namanya bukan nama pembolehubah JavaScript yang sah maka anda harus membungkus nama pengenal dalam petikan supaya ia menjadi rentetan literal. Dan jika anda ingin memohon gaya yang namanya bukan pengenal JavaScript yang sah, anda mesti menggunakan nama JavaScript untuk gaya itu.

<img data-bind="attr: {src: url, alt: details}" />

function viewModel() {
 var self = this;
 self.url = ko.observable(images/logo.png)
 self.details = ko.observable('This is logo')
};
ko.applyBindings(new viewModel());

Pengendalian peristiwa

Knockout menyokong mengikat apa-apa peristiwa melalui acara terbina dalamnya. Ia menambah pengendali acara untuk peristiwa yang ditentukan ke elemen DOM yang berkaitan. Anda boleh menggunakannya untuk mengikat mana -mana peristiwa HTML yang ditakrifkan. Di dalam pengendali acara anda, anda boleh mengakses item data model paparan semasa, objek acara, atau parameter tersuai yang diluluskan sebagai sebahagian daripada peristiwa yang mengikat. Untuk menggunakan mengikat acara, anda lulus objek literal yang mengandungi pasangan nilai nama untuk nama acara dan kaedah model paparan, dipisahkan oleh koma.

<style>
.colorize {color: red}
</style>

<p data-bind="css: { colorize: on }">Text</p>

function viewModel() {
 var self = this;
 self.on = ko.observable(true)
};
ko.applyBindings(new viewModel());

Klik mengikat, seperti yang anda boleh meneka, mengendalikan acara klik. Kerana ia adalah mengikat yang paling banyak digunakan untuk acara, ia hanya satu jalan pintas untuk mengikat acara.

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

Hantar pengikatan adalah pintasan untuk mengendalikan acara penyerahan untuk elemen borang. Apabila anda menggunakan pengikatan yang mengikat pada borang, kalah mati akan menghalang tindakan lalai penyemak imbas untuk borang itu. Dengan kata lain, penyemak imbas akan memanggil fungsi pengendali anda tetapi tidak akan menyerahkan borang kepada pelayan. Ini adalah lalai yang berguna kerana apabila anda menggunakan pengikatan hantar, biasanya kerana anda menggunakan borang sebagai antara muka kepada model pandangan anda, bukan sebagai borang HTML biasa. Sekiranya anda ingin membiarkan borang itu menyerahkan seperti borang HTML biasa, hanya kembali dari pengendali hantar anda.

Daripada menggunakan hantar pada borang, anda boleh menggunakan klik pada butang hantar. Tetapi dengan menggunakan pengikatan yang memberi anda manfaat menggunakan cara alternatif untuk menyerahkan borang, seperti menekan kekunci Enter semasa menaip ke dalam kotak teks.

Mengawal UI

Pengikatan yang kelihatan menetapkan penglihatan elemen yang berkaitan berdasarkan nilai parameter yang mengikat. Percubaan mengikat untuk menukar mana -mana parameter kepada nilai boolean. Pengikatan yang kelihatan kalah mati harus terikat kepada harta yang menilai benar atau palsu. Ini mengambil keutamaan atas sebarang gaya paparan yang telah anda tentukan menggunakan CSS.

<span data-bind="text: msg, visible: toggle"></span>

Enable/Lumpuhkan Mengikat Menetapkan Atribut Dilumpuhkan pada Elemen Berkaitan berdasarkan nilai yang dibekalkan. Ini biasanya digunakan untuk elemen borang seperti input, pilih dan teks. Knockout menyediakan pengikatan terbina dalam untuk membolehkan dan melumpuhkan elemen input. Mengaktifkan pengikatan akan membolehkan elemen input jika harta itu terikat untuk menilai benar, dan akan melumpuhkan elemen jika ia menilai palsu. Pengikatan yang disable tidak tepat bertentangan

<p>The tip of the day is: <span data-bind="text: tipOfTheDay"></span></p> 

function viewModel() {
 var self = this;
 self.tipOfTheDay = ko.observable('Relax.Take it easy!')
};
ko.applyBindings(new viewModel());

Knockout mempunyai pengikat terbina dalam yang bernama Hasfocus yang menentukan dan menetapkan elemen yang mempunyai tumpuan. Pengikatan hasfocus berguna apabila anda mahu fokus ditetapkan ke elemen tertentu dalam bentuk contoh borang carian apabila pelawat membuka halaman

<input data-bind="value: name, valueUpdate: 'afterkeydown'"></input>
<p data-bind="text: name"></p>

function viewModel() {
 var self = this;
 self.name = ko.observable()
};
ko.applyBindings(new viewModel());

berurusan dengan kotak semak dan butang radio

kotak semak boleh menjadi data yang terikat kepada pengikatan yang diperiksa. Pengikatan yang diperiksa harus terikat kepada harta atau ungkapan yang menilai benar atau palsu. Kerana sifat model paparan ditakrifkan sebagai pemerhatian, kotak semak dikemas kini apabila sumber harta berubah. Begitu juga, apabila pengguna memeriksa atau melepaskan kotak semak, nilai itu dikemas kini dalam harta model View. Pengikatan ini menetapkan keadaan butang radio dan kotak semak yang diperiksa. Untuk kotak semak, percubaan mengikat untuk menukar mana -mana parameter ke dalam nilai boolean. Untuk butang radio, pengikatan membandingkan atribut nilai butang ke parameter mengikat.

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

Membuat senarai dropdown

Senarai dropdown mempunyai beberapa sifat penting untuk memuatkan senarai item, memaparkan nilai, menggunakan nilai kunci yang berbeza dan simpan pemilihan pengguna. Knockout menyediakan pengikatan terbina dalam untuk setiap ini. Pilihan mengikat menetapkan pilihan yang akan muncul dalam elemen senarai drop-down. Nilai harus menjadi array. Pengikatan ini tidak boleh digunakan dengan apa -apa selain daripada elemen. Untuk senarai multi-pilih, untuk menetapkan pilihan mana yang dipilih, atau untuk membaca pilihan mana yang dipilih, gunakan pengikatan yang dipilih. Untuk satu senarai pilih, anda juga boleh membaca dan menulis pilihan yang dipilih menggunakan pengikatan nilai.

Pilihan mengikat mengenal pasti senarai nilai untuk dipaparkan, biasanya dari harta array pada model paparan.

<span data-bind="text: msg, visible: toggle"></span>

Kawalan mengikat terpilih yang elemen dalam senarai multi-pilih kini dipilih. Apabila pengguna memilih atau memilih item dalam senarai pelbagai pilihan, ini menambah atau membuang nilai yang sepadan dengan array pada model pandangan anda.

<p>The tip of the day is: <span data-bind="text: tipOfTheDay"></span></p> 

function viewModel() {
 var self = this;
 self.tipOfTheDay = ko.observable('Relax.Take it easy!')
};
ko.applyBindings(new viewModel());

Kadang -kadang anda ingin memaparkan satu nilai dalam senarai dropdown tetapi gunakan nilai lain apabila pengguna memilih item dari senarai. Bantuan OpsyenStext dan OptionValue Knockout. Pengikatan OpsyenStext ditetapkan ke nama rentetan harta untuk dipaparkan dalam senarai dropdown, dari pilihan mengikat. Pengikatan optionsValue ditetapkan ke nama rentetan harta untuk mengikat untuk nilai yang dipilih item dalam senarai dropdown. OptionsCaption berguna apabila anda tidak mahu mempunyai pilihan prtikular yang dipilih secara lalai. Parameter ini menetapkan teks seperti 'Pilih item ...' di atas senarai pilihan dan tunjukkannya apabila tidak ada item tertentu yang dipilih.

<input data-bind="value: name, valueUpdate: 'afterkeydown'"></input>
<p data-bind="text: name"></p>

function viewModel() {
 var self = this;
 self.name = ko.observable()
};
ko.applyBindings(new viewModel());

Dan itu semua untuk bahagian ini, tunggu untuk perlawanan akhir, masa yang sama minggu depan!

soalan yang sering ditanya mengenai knockoutjs

Apakah perbezaan antara knockoutjs dan perpustakaan JavaScript yang lain? Tidak seperti perpustakaan JavaScript yang lain, knockoutjs menggunakan corak reka bentuk model-viewmodel (MVVM) di mana model dan pandangan dipisahkan, menjadikannya lebih mudah untuk menguruskan antara muka yang didorong oleh data yang kompleks. Ia juga menyediakan penyegaran UI automatik apabila model data berubah dan menawarkan pengikatan deklaratif untuk menyambungkan bahagian UI ke model data. Pengikatan deklaratif untuk menyambungkan bahagian UI ke model data. Ini bermakna anda boleh mengikat data dengan mudah ke elemen HTML dengan cara yang mudah difahami dan dikekalkan. Apabila model data berubah, knockoutjs secara automatik mengemas kini bahagian UI yang berkaitan, menghapuskan keperluan untuk manipulasi DOM manual.

Bolehkah knockoutjs berfungsi dengan perpustakaan JavaScript yang lain? Ia tidak membuat apa -apa andaian mengenai stack teknologi anda, jadi ia boleh diintegrasikan dengan perpustakaan atau rangka kerja lain seperti jQuery, bootstrap, atau bahkan angularjs. >

KnockoutJS menyediakan pengikatan 'CSS' yang membolehkan anda menambah atau mengeluarkan satu atau lebih kelas CSS yang dinamakan ke elemen DOM yang berkaitan. Pengikatan ini amat berguna apabila anda ingin memohon kelas CSS ke elemen berdasarkan keadaan data. mengenai perubahan, dan secara automatik mengesan kebergantungan. Ciri ini adalah asas kepada knockoutjs, kerana ia membolehkan perpustakaan untuk mengemas kini bahagian-bahagian yang betul dari UI apabila model data berubah.

Bagaimana saya boleh menggunakan knockoutjs dengan teknologi sebelah pelayan?

Knockoutjs boleh digunakan dengan mana-mana teknologi sisi pelayan. Ia agnostik kepada bahasa sisi pelayan yang anda gunakan, jadi anda boleh menggunakannya dengan PHP, .NET, Java, Ruby, Python, atau mana-mana bahasa pelayan lain. Anda hanya perlu menghantar data JSON kepada klien dan kemudian gunakan knockoutjs untuk mengikat data ini ke html anda. mekanisme pengesahan. Walau bagaimanapun, ia boleh diintegrasikan dengan mudah dengan perpustakaan pengesahan lain seperti pengesahan jQuery atau knockout-validation, plugin berasingan yang direka khusus untuk pengesahan bentuk dalam knockoutjs. 🎜> Walaupun knockoutjs direka terutamanya untuk pembangunan web, ia juga boleh digunakan dalam pembangunan aplikasi mudah alih dalam kombinasi dengan teknologi lain seperti PhoneGap atau Cordova, yang membolehkan anda untuk Buat aplikasi asli menggunakan HTML, CSS, dan JavaScript. Ia juga menyediakan pengikatan peristiwa lain seperti 'acara', 'hantar', 'membolehkan', 'melumpuhkan', 'hasfocus', dan banyak lagi. Pengikatan ini menjadikannya mudah untuk mengendalikan interaksi pengguna dengan cara deklaratif. Corak reka bentuk MVVM menjadikannya lebih mudah untuk menguruskan antara muka yang didorong oleh data yang kompleks, dan sistem pemerhatian dan pengikatannya membantu mengekalkan kod yang dianjurkan dan dikekalkan, walaupun untuk aplikasi yang besar.

Atas ialah kandungan terperinci Panduan Pemula untuk Knockoutjs: Bahagian 2. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!