Pengenalan kepada KnockoutJs

Kandungan ini pada asasnya adalah terjemahan bahan asal. Hasratnya adalah untuk mempelajari tentang KnockoutJs untuk Magento 2 dan mencipta kandungan dalam bahasa Portugis tentang KnockouJs.

Dokumentasi

• Microsoft: MVVM
• KnockoutJs: Pengenalan
• KnockoutJs: Pemasangan

Corak MVVM

Seni bina MVVM (Model-View-ViewModel) ialah corak reka bentuk perisian yang digunakan secara meluas dalam aplikasi antara muka pengguna. MVVM amat berguna dalam aplikasi dengan antara muka pengguna yang kompleks dan interaktif, kerana ia jelas memisahkan logik perniagaan daripada tingkah laku antara muka. Ini memudahkan penyelenggaraan kod, kebolehujian dan kebolehskalaan.

Apabila pengguna berinteraksi dengan Paparan, ViewModel menangkap tindakan ini dan mengemas kini data yang sepadan dalam Model. Apabila Model dikemas kini, ViewModel menerima perubahan ini dan mengemas kini secara automatik Paparan, mencerminkan perubahan dalam antara muka pengguna. ViewModel juga boleh melakukan tindakan tertentu, seperti menghantar permintaan kepada pelayan untuk mengambil atau menghantar data.

Model: Model mewakili lapisan data aplikasi. Ia mengendalikan logik perniagaan, peraturan pengesahan, penyimpanan data dan pengambilan semula. Model umumnya terdiri daripada objek data yang mewakili entiti dan fungsi khusus untuk domain aplikasi.

Paparan: Paparan ialah lapisan pembentangan aplikasi, bertanggungjawab untuk memaparkan data Model dan berinteraksi dengan pengguna. Ia mewakili antara muka grafik yang mana pengguna berinteraksi untuk menggambarkan dan memanipulasi data. Dalam seni bina MVVM, Paparan disimpan seboleh mungkin daripada logik perniagaan, menjadikannya mudah untuk dikemas kini dan diganti.

ViewModel: ViewModel ialah bahagian teras corak MVVM. Ia bertindak sebagai perantara antara Paparan dan Model, melaksanakan komunikasi dan pengikatan data dwiarah antara mereka. ViewModel mengandungi logik pembentangan, mengubah data daripada Model kepada bentuk yang sesuai untuk dipaparkan dalam View. Selain itu, ViewModel mengurus acara dan respons pengguna, berinteraksi dengan Model mengikut keperluan.

Kalah MatiJs

Knockout.js ialah perpustakaan JavaScript sumber terbuka yang membolehkan anda mencipta antara muka pengguna yang dinamik dan reaktif. Ia amat berguna untuk membangunkan aplikasi web dengan antara muka pengguna yang kompleks dan interaktif. KnockoutJs adalah berdasarkan corak reka bentuk MVVM (Model-View-ViewModel), yang memisahkan logik perniagaan (Model) daripada pembentangan (View) hingga dari perantaraan lapisan dipanggil ViewModel. Ia bebas daripada mana-mana struktur lain.

KnockoutJs dibangunkan dan dikekalkan sebagai projek sumber terbuka oleh Steve Sanderson, pekerja Microsoft pada 5 Julai 2010.

KnockoutJs menyokong semua penyemak imbas arus perdana - IE 6, Firefox 3.5, Chrome, Opera, Safari (desktop/mudah alih). Atribut data-bind bukan asli kepada HTML, walaupun ia merupakan atribut yang boleh diterima (ia benar-benar serasi dengan HTML 5 dan tidak menyebabkan masalah dengan HTML 4, walaupun pengesah menunjukkan bahawa ia adalah atribut yang tidak diiktiraf). Tetapi oleh kerana penyemak imbas tidak tahu maksud ini, anda perlu mengaktifkan KnockoutJs untuk ia berkuat kuasa.

Apabila menggunakan KnockoutJs, lapisan view anda hanyalah dokumen HTML anda dengan pengikatan deklaratif untuk memautkannya ke lapisan model paparan. Sebagai alternatif, anda boleh menggunakan model yang menjana HTML menggunakan data daripada model dalam lapisan model paparan.

Cuma letak blok skrip di bahagian bawah dokumen HTML atau letakkan di bahagian atas dan bungkus kandungan dalam pengendali sedia DOM seperti fungsi $ jQuery.

ko.applyBindings(myViewModel): ialah kaedah yang digunakan untuk menggunakan data binding dalam KnockoutJs dan mengikat ViewModel (atau Model) kepada pengguna antara muka (Lihat). Ia menghubungkan ViewModel kepada elemen HTML dalam DOM, membenarkan data daripada ViewModel dipantulkan secara automatik dalam UI dan sebaliknya. Apabila memanggil kaedah ini, KnockoutJs merentasi DOM untuk mencari elemen yang mempunyai arahan data binding KnockoutJs dan mencipta pautan antara elemen ini dan sifat ViewModel yang dinyatakan dalam arahan .

Secara pilihan, anda boleh lulus parameter kedua untuk menentukan bahagian dokumen yang anda ingin cari untuk atribut mengikat data. Contohnya, ko.applyBindings(myViewModel, document.getElementById('someElementId')). Ini mengehadkan pengaktifan kepada elemen dengan ID someElementId dan keturunannya, yang berguna jika anda ingin mempunyai berbilang model paparan dan mengaitkan setiap satu dengan kawasan halaman yang berbeza.

Pemasangan

Cuma rujuk fail JavaScript menggunakan di suatu tempat pada halaman HTML anda.

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

Jelas sekali adalah perlu untuk mengemas kini atribut src agar sepadan dengan tempat fail yang dimuat turun diletakkan.

CDN

Untuk menawarkan kelajuan muat turun terpantas, adalah lebih baik untuk merujuk KnockoutJs daripada salah satu CDN pihak ketiga berikut pada tapak web panduan pemasangan KnockoutJs rasmi.

Atas ialah kandungan terperinci Pengenalan kepada KnockoutJs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!