Panduan Pemula untuk Knockoutjs: Bahagian 1

3

Kunci Takeaways

KnockOutJS adalah perpustakaan JavaScript yang memudahkan penciptaan UI web yang kaya, seperti desktop. Ia menawarkan mekanisme mengikat dua hala yang mudah untuk menghubungkan model data ke UI, menjadikan penyegerakan di antara mereka mudah. ​​

Knockout menggunakan corak reka bentuk model pandangan model-pandangan (MVVM), memisahkan aplikasi anda menjadi tiga bahagian: model yang memegang data aplikasi anda, pandangan yang berfungsi sebagai penyambung dan lapisan komunikasi antara model dan pandangan, dan a Lihat yang merujuk kepada semua elemen UI dalam permohonan anda.

KnockoutJS dibina di atas tiga konsep teras: pengikatan deklaratif, pengesanan pergantungan, dan templat. Pengikatan deklaratif menghubungkan bahagian UI anda ke model data anda. Penjejakan pergantungan menggunakan pengikatan dan pembolehubah khas yang dipanggil 'Observables' untuk mengemas kini semua bahagian yang berkaitan dengan data model apabila ia berubah. Templating berguna untuk memaparkan struktur model model yang kaya sambil mengekalkan kod anda dengan mudah. ​​

• Observables adalah objek JavaScript khas yang digunakan dalam knockoutjs yang dapat memberitahu pelanggan tentang perubahan dan secara automatik mengesan dependensi. Ini membolehkan pandangan untuk mengemas kini secara automatik apabila model berubah, tanpa perlu memanipulasi secara manual Dom.
Panduan Pemula untuk Knockoutjs: Asas dan Observables
• Hampir semua orang yang berurusan dengan teknologi web tahu jQuery, atau sekurang -kurangnya telah mendengarnya. Kesederhanaan dan kesimpulan yang tidak dapat ditandingi menjadikan kehidupan berjuta -juta pemaju web di seluruh dunia lebih mudah -dan itu hebat.
Malangnya jQuery bukan penyelesaian untuk setiap masalah. Sebaik sahaja anda membuat keputusan untuk membuat beberapa aplikasi web yang lebih kompleks, anda menghadapi masalah - tidak ada cara mudah untuk menjadikan UI dan data anda berkomunikasi antara satu sama lain secara dinamik. Dengan manipulasi DOM dan pengendalian peristiwa yang disediakan oleh jQuery ini agak sukar untuk dicapai. Anda memerlukan perpustakaan yang menyediakan anda dengan cara komunikasi yang lebih canggih antara UI dan model data yang mendasari.
Dan di sinilah kalah mati masuk. Knockout adalah perpustakaan JavaScript yang membantu penciptaan UI web seperti desktop seperti desktop. Ia memudahkan interaksi pengguna dan menjadikan antara muka responsif sepenuhnya kepada sebarang perubahan sumber data. Knockout menyediakan mekanisme mengikat dua hala yang mudah untuk menghubungkan model data ke UI, sehingga membuat penyegerakan di antara mereka angin.

Walaupun anda perlu menggunakan kalah mati dengan jQuery pada masa yang sama, dalam beberapa kes seperti peralihan animasi, kalah mati sendiri tidak bergantung kepadanya. Satu lagi perkara yang perlu anda fahami ialah kalah mati tidak bersaing dengan jQuery - mereka berdua melakukan pekerjaan yang sangat baik; masing -masing ke arahnya sendiri. Seperti yang anda akan lihat jika anda ingin mendapatkan manfaat yang paling banyak, anda harus menggunakannya bersama -sama.

Dalam tutorial ini, kita mulakan dengan konsep teras dan keupayaan kalah mati. Dalam bahagian kedua, kami akan lebih mendalam meneroka pengikatan terbina dalam dan cara menggunakannya. Dan pada akhir, kami akan melalui beberapa ciri dan teknik canggih, seperti pemerhatian lanjutan dan bagaimana untuk membuat pengikatan tersuai anda sendiri. Mari kita mulakan!

Konsep Asas

Sebelum kita melalui contoh kod, pertama anda mungkin perlu memahami beberapa konsep asas. Knockout melaksanakan corak reka bentuk model-pandangan-pandangan model (MVVM) untuk JavaScript. Dalam corak ini aplikasi anda dibahagikan kepada tiga bahagian:

Model yang memegang data aplikasi anda. Ini boleh menjadi data yang dimasukkan oleh pengguna atau data JSON yang diambil dari pelayan web.

Pandangan yang berfungsi sebagai penyambung dan lapisan komunikasi antara model dan pandangan. Ia memegang data dan operasi untuk memanipulasi data ini dan memaparkannya dalam UI. Setiap kali model data diubah kemas kini bahagian UI yang sesuai, mencerminkan perubahan ini. Lihat model dalam aplikasi anda diwakili oleh kod JavaScript.

Pandangan yang merujuk kepada semua elemen UI dalam permohonan anda. Ia adalah perwakilan struktur dan penampilan untuk UI yang diberikan. Pandangan bertanggungjawab untuk memaparkan data dan menerima input pengguna. Pandangan diwakili oleh kod HTML/CSS dalam aplikasi anda.

Mereka adalah tiga konsep teras apabila kalah mati dibina:

1. Pengikatan Deklaratif: Ini membolehkan anda menyambungkan bahagian UI anda ke model data anda dengan cara yang mudah dan mudah. Apabila menggunakan JavaScript secara langsung untuk memanipulasi DOM ini boleh menyebabkan kod patah jika anda kemudian menukar hierarki DOM atau ID elemen. Dengan pengikatan deklaratif walaupun anda menukar DOM semua kepingan terikat tetap bersambung. Anda boleh mengikat data ke DOM dengan hanya termasuk atribut mengikat data ke mana-mana elemen DOM.

2. Penjejakan Ketergantungan: Syukurlah kepada pengikatan dan jenis pembolehubah khas yang dipanggil Observables setiap kali apabila data model anda telah mengubah semua bahagian yang berkaitan dengannya secara automatik dikemas kini. Tidak perlu bimbang tentang menambah pengendali acara dan pendengar. Semua kerja tambahan itu dilakukan secara dalaman oleh kalah mati dan pemerhatian, yang memberitahu pendengar apabila nilai -nilai mendasar telah berubah.

3. Templating: Ini berguna apabila aplikasi anda menjadi lebih kompleks dan anda memerlukan cara untuk memaparkan struktur model model yang kaya, dengan itu mengekalkan kod anda mudah. Knockout mempunyai enjin template asli, terbina dalam yang boleh anda gunakan dengan segera. Tetapi jika anda mahu, enjin template pihak ketiga, seperti jQuery.tmpl atau garis bawah, juga boleh digunakan.

Jangan risau jika semua teori ini terdengar tidak jelas kepada anda. Apabila kita melalui tutorial dan contoh kod semuanya akan menjadi lebih jelas.

Bermula

Sebelum kita menyelam ke kalah mati, anda perlu memuat turun dan merujuk perpustakaan dalam dokumen HTML anda.

<script type='text/javascript' src='knockout-2.0.0.js'></script>

Untuk memastikan kod anda terpisah dari persembahan anda adalah lebih baik untuk membuat fail JavaScript untuk memegang semua kod aplikasi. Dan kerana kami akan menggunakan jQuery dalam beberapa kes, anda perlu merujuknya juga.

<script type='text/javascript' src='knockout-2.0.0.js'></script>

Ini dianggap sebagai amalan terbaik tetapi untuk tujuan latihan dan untuk membuat perkara lebih mudah, anda boleh meletakkan kod JavaScript dalam dokumen yang sama dengan sama ada memasukkannya ke dalam tag kepala atau meletakkannya di bawah markup anda.

Sekarang, untuk membuat model paparan hanya mengisytiharkan sebarang objek JavaScript seperti ini:

  function viewModel() {

   // Your code here
  
  };

atribut mengikat data (dijelaskan kemudian) tidak berasal dari HTML, dan penyemak imbas tidak tahu apa maksudnya. Oleh itu, untuk berkuatkuasa kalah mati perlu diaktifkan dengan memasukkan fungsi KO.ApplyBindings () pada akhir skrip. Juga jika anda menggunakan fail JavaScript luaran atau skrip anda diletakkan di dalam tag kepala dokumen anda, anda perlu membungkus kod kalah mati dalam fungsi siap jQuery untuk berfungsi dengan baik. Berikut adalah templat asas untuk memulakan:

$(document).ready(function(){
  
  function viewModel() {

   // Your code here
  
  };

  ko.applyBindings(new viewModel()); 

});

Memanggil kaedah KO.ApplyBindings () dan lulus dalam model pandangan kami memberitahu Knockout untuk mengikat model yang ditentukan ke UI kami. Anda juga boleh menyediakan elemen DOM jika anda hanya mahu mengikat model pandangan ini kepada satu bahagian UI keseluruhan anda. ko.applybindings () mengambil dua parameter. Parameter pertama mengatakan apa objek model pandangan yang anda mahu gunakan dengan pengikatan deklaratif yang diaktifkannya. Parameter kedua adalah pilihan dan ia mentakrifkan bahagian mana dokumen yang anda ingin cari atribut mengikat data. Sebagai contoh, ko.applyBindings (viewModel, document.getElementById ('container')) akan menyekat pengaktifan ke elemen dengan bekas ID dan keturunannya. Ini berguna jika anda ingin mempunyai model paparan berganda dan mengaitkan masing -masing dengan kawasan yang berbeza dari halaman.

bagaimana ia berfungsi

Dengan kalah mati, anda boleh mengikat data ke elemen DOM dengan memasukkan atribut mengikat data dalam markup yang menentukan pengikat data untuk dilakukan. Kod ini tidak pernah merujuk kepada struktur DOM supaya anda boleh mengubah HTML secara bebas tanpa memecahkan pengikat anda. Dalam contoh berikut, kami menambah atribut pengikat data teks ke elemen span seperti ini:

// syntax: data-bind="bindingName: bindingValue"
<p>The day of the week is <span data-bind="text: dayOfWeek"></span>. It's time for <span data-bind="text: activity"></span></p>

maka jika kita mahu membuat nilai teks untuk dikemas kini secara dinamik maka kita harus mengisytiharkannya dalam model pandangan kita sebagai yang dapat dilihat.

function viewModel() {
  this.dayOfWeek = ko.observable('Sunday');
  this.activity = ko.observable('rest');
};

ko.applyBindings(new viewModel()); 

Ini akan mengeluarkan "Hari dalam seminggu adalah hari Ahad. Sudah tiba masanya untuk berehat ".

Observables

Knockout melaksanakan sifat -sifat yang dapat dilihat dengan membungkus sifat objek dengan fungsi tersuai bernama ko.observable ().

this.property = ko.observable('value')

Observables ditetapkan sebagai fungsi. Oleh itu, anda boleh menggunakannya dengan cara berikut:

<script type='text/javascript' src='knockout-2.0.0.js'></script>

Knockout tidak memerlukan anda menggunakan sifat yang dapat dilihat. Jika anda mahu elemen DOM untuk menerima nilai sekali tetapi kemudian tidak dikemas kini apabila nilai dalam perubahan objek sumber, objek mudah akan mencukupi. Walau bagaimanapun, jika anda mahu objek sumber anda dan sasaran elemen DOM untuk kekal di Sync-dua hala mengikat-maka anda akan ingin mempertimbangkan menggunakan sifat yang dapat dilihat.

Dalam beberapa kes, anda mungkin perlu menggabungkan nilai -nilai dua atau lebih yang dapat dilihat ke dalam satu nilai baru. Ini boleh dilakukan dengan yang dipanggil yang dikira. Pemantauan yang dikira adalah fungsi yang bergantung kepada satu atau lebih yang boleh diperhatikan, dan akan mengemas kini secara automatik apabila mana -mana kebergantungan ini berubah. Harta yang dikira secara automatik dikemas kini apabila mana -mana pemerhatian bergantung pada perubahan penilaiannya. Dalam contoh berikut, Fulldate bernama Fulldate yang dikira akan dikemas kini setiap kali satu atau lebih hari, bulan dan tahun yang boleh diperhatikan.

<script type='text/javascript' src='knockout-2.0.0.js'></script>

KO.COMPUTED () mengambil parameter kedua ini. Tanpa lulus, tidak mungkin untuk merujuk kepada ini.day (), this.month () atau this.year (). Untuk mempermudahkan perkara, anda boleh membuat pembolehubah diri, dengan itu mengelakkan penambahan parameter kedua. Mulai sekarang kita akan menggunakan pendekatan ini dalam contoh kod.

  function viewModel() {

   // Your code here
  
  };

Apabila anda berurusan dengan satu objek, anda dapat dengan mudah mengesan sebarang perubahan kepadanya dengan mengubahnya menjadi yang dapat dilihat. Tetapi bagaimana jika anda mempunyai pelbagai objek? Dalam kes sedemikian, kalah mati mempunyai objek khas yang dipanggil ko.observablearray (), yang dapat mengesan dan bertindak balas terhadap perubahan koleksi perkara. Ini memungkinkan untuk memaparkan dan/atau mengedit pelbagai nilai, sebagai contoh, apabila anda memerlukan bahagian UI berulang untuk muncul dan hilang sebagai item ditambah dan dikeluarkan.

Anda harus ingat bahawa trek array yang dapat dilihat yang objek berada dalam array, bukan keadaan objek tersebut. Hanya meletakkan objek ke dalam array yang dapat dilihat tidak menjadikan semua sifat objek itu dapat dilihat. Jika anda ingin anda boleh membuat sifat -sifat tersebut dapat dilihat, tetapi itu benar -benar terpulang kepada anda. Arahan yang dapat dilihat hanya menjejaki objek yang dipegangnya, dan memberitahu pendengar apabila objek ditambah atau dikeluarkan.

$(document).ready(function(){
  
  function viewModel() {

   // Your code here
  
  };

  ko.applyBindings(new viewModel()); 

});

Apabila anda membuat array yang dapat dilihat, anda boleh meninggalkannya kosong atau mengisi dengan beberapa nilai awal. Dalam contoh berikut, kami membuat array yang dapat dilihat dengan hari -hari dalam seminggu:

// syntax: data-bind="bindingName: bindingValue"
<p>The day of the week is <span data-bind="text: dayOfWeek"></span>. It's time for <span data-bind="text: activity"></span></p>

seperti yang anda lihat, untuk membaca dan menulis Array Knockout Anda boleh menggunakan mana -mana fungsi JavaScript asli. Tetapi knockout mempunyai fungsi bersamaan sendiri yang sintaks adalah sedikit lebih mudah:

function viewModel() {
  this.dayOfWeek = ko.observable('Sunday');
  this.activity = ko.observable('rest');
};

ko.applyBindings(new viewModel()); 

Untuk senarai penuh fungsi yang tersedia, anda boleh menyemak dokumentasi.

Jika anda suka membaca siaran ini, anda akan suka dipelajari; Tempat untuk mempelajari kemahiran dan teknik segar dari Sarjana. Ahli mendapat akses segera ke semua ebook SitePoint dan kursus dalam talian interaktif, seperti pengaturcaraan JavaScript untuk web.

Soalan Lazim (Soalan Lazim) 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 merujuk kepada data, pandangan adalah perwakilan visual data, dan ViewModel adalah perantara antara model dan pandangan. Corak ini membolehkan pemisahan kebimbangan yang jelas, menjadikan kod anda lebih mudah untuk mengurus dan menguji. Perpustakaan KnockoutJS dalam fail HTML anda. Anda boleh memuat turunnya dari laman web rasmi KnockoutJS atau memasukkannya terus dari rangkaian penghantaran kandungan (CDN). Sebaik sahaja anda telah memasukkan perpustakaan, anda boleh mula membuat viewmodel anda dan mengikatnya dengan pandangan anda menggunakan sintaks knockoutjs.

Bagaimana data mengikat kerja dalam knockoutjs? cara mewujudkan sambungan antara model (data anda) dan pandangan (elemen DOM di laman web anda). Sambungan ini membolehkan perubahan dalam data anda untuk mengemas kini paparan secara automatik, dan sebaliknya. Knockoutjs menyediakan beberapa pengikatan terbina dalam untuk tugas-tugas biasa seperti teks dan nilai mengikat, dan anda juga boleh membuat pengikatan tersuai untuk senario yang lebih kompleks. Objek JavaScript yang dapat memberitahu pelanggan tentang perubahan, dan secara automatik mengesan kebergantungan. Dalam knockoutjs, anda menggunakan Observables untuk mengemas kini paparan secara automatik apabila model berubah, tanpa perlu memanipulasi DOM secara manual. Ini menjadikan kod anda lebih bersih dan lebih mudah untuk dikekalkan. Mana -mana kebergantungan ini berubah. Untuk membuat yang dikira boleh diperhatikan dalam knockoutjs, anda menggunakan fungsi KO.computed, lulus dalam fungsi yang mengembalikan nilai yang dikira. Mengikat untuk membolehkan anda bertindak balas terhadap tindakan pengguna seperti klik atau tekanan utama. Dalam ViewModel anda, anda menentukan fungsi untuk mengendalikan acara tersebut, dan kemudian gunakan peristiwa yang mengikat pada pandangan anda untuk menyambungkan acara ke fungsi anda.

Apakah peranan ViewModel dalam knockoutjs?

ViewModel dalam knockoutjs adalah objek JavaScript yang mewakili data dan operasi pada UI. Ia bertanggungjawab untuk mengekalkan keadaan pandangan, mengendalikan tindakan pengguna, dan mengemas kini model apabila perlu. ViewModel bukan perwakilan langsung data, tetapi sebaliknya versi khusus untuk pandangannya. Ketulan markup yang boleh diberikan dengan data yang berbeza. Anda boleh menentukan templat menggunakan elemen skrip dengan jenis "teks/html", dan kemudian gunakan templat yang mengikat untuk menjadikan templat dengan data anda. > Debugging Aplikasi KnockoutJS boleh dilakukan dengan menggunakan alat pemaju pelayar. Anda boleh memeriksa data yang terikat kepada elemen DOM menggunakan fungsi ko.datafor dan ko.contextfor. Di samping itu, knockoutjs menyediakan fungsi ko.tojson, yang boleh digunakan untuk menukar viewmodel anda ke dalam rentetan json untuk pemeriksaan mudah. Boleh digunakan bersama perpustakaan JavaScript lain seperti jQuery atau bootstrap. KnockoutJS tidak memanipulasi DOM secara langsung, tetapi mengemas kini pandangan berdasarkan perubahan pada ViewModel, jadi ia tidak mengganggu perpustakaan lain yang memanipulasi DOM.

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