Cara Mengintegrasikan Plugin JQuery ke dalam aplikasi Ember
mata utama
- Mengintegrasikan pemalam jQuery ke dalam aplikasi Ember dapat meningkatkan fungsi dan pengalaman penggunanya dengan menggabungkan kesederhanaan dan fleksibiliti pemalam jQuery dengan keteguhan dan skalabilitas Ember.
- Untuk mengintegrasikan plug-in jQuery ke dalam aplikasi Ember, pasang pertama jQuery menggunakan Pengurus Pakej NPM, dan kemudian mengimport plug-in ke dalam komponen Ember yang berkaitan.
- inisialisasi pemalam jQuery dalam komponen Ember harus dilakukan dalam fungsi khas bernama
- , menggunakan
didInsertElementbukanthis.$untuk memastikan bahawa pemalam hanya dimulakan untuk komponen ini dan tidak mengganggu komponen lain.$ Untuk mengelakkan pengendali acara yang berlebihan, sebarang peristiwa yang ditetapkan menggunakan plugin hendaklah dikeluarkan apabila komponen akan dikeluarkan dari DOM, menggunakan cangkuk Ember yang lain bernama - .
willDestroyElement
Artikel ini dikaji semula oleh Craig Bilner. Terima kasih kepada semua pengulas rakan sebaya untuk mendapatkan kandungan SitePoint dengan sebaik -baiknya!
Memandangkan populariti jQuery, ia masih memainkan peranan penting dalam bidang pembangunan web, terutamanya apabila menggunakan rangka kerja seperti Ember, tidak menghairankan bahawa ia sering digunakan. Komponen rangka kerja ini adalah serupa dengan plugin jQuery, kerana semuanya direka untuk mengambil tanggungjawab tunggal dalam projek. Dalam artikel ini, kami akan membangunkan komponen Ember yang mudah. Tutorial ini menunjukkan cara mengintegrasikan pemalam jQuery ke dalam aplikasi Ember anda. Komponen ini bertindak sebagai pembalut untuk plugin, memaparkan senarai gambar kecil imej. Setiap kali kita mengklik pada lakaran kecil, versi yang lebih besar akan dipaparkan dalam Pratonton Imej. Ini dilakukan dengan mengekstrak atribut dari gambar kecil yang diklik. Kami kemudian menetapkan harta Previewer src ke harta kecil src. Kod lengkap untuk artikel ini boleh didapati di GitHub. Dengan ini, mari kita mulakan projek ini. src
Tetapan Projek
Pertama, mari buat projek Ember baru. Pertama, laksanakan perintah berikut pada CLI:
npm install -g ember-cli
ember new emberjquery
dan memasang kebergantungan yang diperlukan. Sekarang, pergi ke direktori dengan menulis emberjquery. Projek ini mengandungi fail yang berbeza yang akan kami edit dalam tutorial ini. Fail pertama yang perlu anda edit ialah fail cd emberjquery. Buka dan tukar versi Ember semasa ke 2.1.0. Plugin jQuery yang saya buat untuk projek ini boleh didapati sebagai pakej Bower. Anda boleh memasukkan baris ini dalam projek anda dengan menambahkannya ke fail bower.json anda: bower.json
"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"
npm install -g ember-cli
Oleh kerana plugin ini bukan komponen Ember, kita perlu memasukkan fail yang diperlukan secara manual. Dalam fail ember-cli-build.js, tambahkan dua baris berikut sebelum pernyataan return:
ember new emberjquery
garis -garis ini mengimport dua fail dan masukkannya dalam binaan. Satu adalah fail plugin itu sendiri, dan yang lain adalah fail CSS plugin. Lembaran gaya adalah pilihan, dan anda boleh mengecualikannya jika anda bercadang untuk gaya plugin sendiri.
Buat komponen plug-in baru
Setelah memasukkan plugin dalam aplikasi, mari kita mulakan membuat komponen baru dengan melaksanakan perintah berikut:
"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"
Perintah ini mencipta fail kelas dan fail templat. Dalam fail templat, tampal kandungan dari fail bower_components/jquerypic/index.html. Letakkan kandungan dalam tag <body>, tidak termasuk skrip. Pada masa ini, fail templat sepatutnya kelihatan seperti ini:
bower install
Dalam fail kelas, tambahkan fungsi bernama didInsertElement:
// 要添加的行
app.import("bower_components/jquerypic/js/jquerypic.js");
app.import("bower_components/jquerypic/styles/app.css");
return app.toTree();
}; kita berada di titik kritikal sekarang. Dengan jQuery, permulaan plugin biasanya berlaku dalam fungsi document.ready, seperti yang ditunjukkan di bawah:
ember generate component jquery-pic
didInsertElement
- plugin tidak akan mengganggu komponen lain
- Sebelum memulakan plugin, mari kita gunakan komponen dalam keadaan semasa. Untuk melakukan ini, buat templat indeks menggunakan arahan berikut:
kemudian tambahkan kod berikut ke templat untuk menggunakan komponen:
{{yield}}
<div class="jquerypic">
<div class="fullversion-container">
<img class="full-version lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/" alt="">
</div>
<div class="thumbnails">
<img class="thumbnail lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/" alt="">
<img class="thumbnail lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/" alt="">
<img class="thumbnail lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/" alt="">
<img class="thumbnail lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/" alt="">
<img class="thumbnail lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/" alt="">
</div>
</div>Selepas selesai, muatkan pelayan Ember dengan arahan berikut:
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement: function () {
}
});Gunakan arahan ini untuk memulakan pelayan. Buka penyemak imbas pilihan anda dan akses URL yang ditentukan dalam antara muka baris arahan. Anda harus melihat senarai imej kecil di bawah pratonton imej. Perhatikan bahawa apabila anda mengklik pada lakaran kecil, tiada apa yang berlaku. Ini kerana kami belum mempunyai pengendali acara plugin. Mari Lakukan! Tetapi sebelum menerangkan bagaimana untuk melakukan inisialisasi yang betul, saya akan menunjukkan kesilapan yang akan dibuat oleh banyak pemaju. Penyelesaian ini seolah -olah berfungsi pada pandangan pertama, tetapi saya akan membuktikan bahawa ia bukan penyelesaian terbaik dengan menunjukkan ralat yang diperkenalkan.
$(document).ready(function(){
// 在这里初始化插件
});(kandungan berikut adalah serupa dengan teks asal, tetapi ayat -ayat telah diselaraskan dan digilap dan mengekalkan makna asal)
Inisialisasi Komponen Ember
Untuk menunjukkan masalah, mari kita tambahkan kod berikut ke fungsi
:npm install -g ember-cli
tanpa menggunakan Ember, ini adalah bagaimana anda biasanya memulakan plugin. Sekarang, periksa tetingkap penyemak imbas anda dan klik pada gambar kecil. Anda harus melihat mereka memuatkan ke dalam pratonton imej yang besar seperti yang diharapkan. Semuanya nampaknya berfungsi dengan baik, bukan? Ok, lihat apa yang berlaku apabila kami menambah contoh komponen kedua. Lakukan ini dengan menambahkan satu lagi kod kod yang mengandungi kod yang sama yang saya tunjukkan sebelum ini ke dalam templat indeks. Oleh itu, templat anda kini kelihatan seperti ini:
ember new emberjquery
Jika anda beralih ke tetingkap penyemak imbas, anda harus melihat dua contoh komponen muncul. Apabila anda mengklik pada lakaran kecil salah satu contoh, anda dapat melihat ralat. Pratonton untuk kedua -dua keadaan akan berubah, bukan hanya contoh yang mengklik. Untuk menyelesaikan masalah ini, kita perlu menukar inisialisasi sedikit. Pernyataan yang betul untuk digunakan adalah seperti berikut:
"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"
Perbezaannya ialah kita menggunakan this.$ bukannya $ sekarang. Kedua -dua contoh komponen kini harus berfungsi dengan baik. Mengklik pada lakaran kecil untuk satu contoh tidak boleh menjejaskan komponen lain. Apabila kita menggunakan this.$ dalam komponen, kita merujuk kepada pengendali jQuery yang hanya untuk komponen itu. Oleh itu, mana -mana operasi DOM yang kami lakukan di atasnya hanya akan menjejaskan contoh komponen. Di samping itu, mana -mana pengendali acara akan ditetapkan hanya pada komponen ini. Apabila kita menggunakan harta jQuery global $, kita merujuk kepada keseluruhan dokumen. Inilah sebabnya inisialisasi kami mempengaruhi komponen lain. Saya perlu mengubahsuai plugin saya untuk menunjukkan kesilapan ini, yang mungkin menjadi topik artikel masa depan. Walau bagaimanapun, amalan terbaik untuk DOM komponen operasi adalah menggunakan this.$.
Hancurkan plugin
OK, setakat ini kami telah belajar bagaimana untuk menubuhkan pengendali acara. Kini sudah tiba masanya untuk menunjukkan cara menghapuskan sebarang peristiwa yang kami sediakan dengan plugin. Kita harus melakukan ini apabila komponen kita hendak dikeluarkan dari DOM. Kita harus melakukan ini kerana kita tidak mahu mana -mana pengendali acara berlebihan untuk digantung di sana. Nasib baik, komponen Ember menyediakan satu lagi cangkuk yang dipanggil willDestroyElement. Cangkuk ini dipanggil setiap kali Ember akan dimusnahkan dan contoh komponen dikeluarkan dari DOM. Plugin saya mempunyai kaedah stopEvents yang boleh dipanggil pada contoh plugin. Kaedah ini harus dipanggil dalam cangkuk khas yang disediakan oleh Ember. Jadi tambahkan fungsi berikut ke komponen:
bower install
Ubah suai fungsi didInsertElement untuk kelihatan seperti ini:
npm install -g ember-cli
Dalam fungsi didInsertElement, kami hanya menyimpan contoh plugin dalam harta komponen. Kami melakukan ini supaya kami dapat mengaksesnya dalam fungsi lain. Dalam fungsi willDestroyElement, kami memanggil kaedah stopEvents pada contoh plugin. Walaupun ini adalah amalan terbaik, aplikasi kami tidak dapat mencetuskan cangkuk ini. Oleh itu, kami akan menyediakan pengendali klik demo. Dalam pengendali ini, kami akan memanggil kaedah stopEvents pada contoh plugin. Ini membolehkan saya menunjukkan bahawa semua pengendali acara telah dikeluarkan seperti yang diharapkan. Sekarang, mari tambahkan pengendali fungsi klik ke komponen:
ember new emberjquery
kemudian tambahkan tag <code><p> ke templat komponen, seperti yang ditunjukkan di bawah:
"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"
Apabila mengklik pada tab ini, ia memanggil operasi stopEvents memusnahkan plugin. Selepas mengklik pada perenggan, plugin tidak lagi akan bertindak balas terhadap acara klik. Untuk membolehkan acara sekali lagi, anda mesti memulakan plugin seperti yang kami lakukan di cangkuk didInsert. Melalui bahagian terakhir, kami melengkapkan komponen Ember yang mudah. Tahniah!
(Kesimpulan dan bahagian FAQ sama dengan teks asal, kecuali bahawa ayat -ayat diselaraskan dan digilap dan mengekalkan makna asal)
Kesimpulan
Dalam tutorial ini, anda telah melihat bahawa plugin jQuery masih memainkan peranan penting dalam kerjaya kami. Dengan API yang kuat dan rangka kerja JavaScript yang ada, sangat berguna untuk memahami cara menggabungkan kedua -dua dunia ini dan menjadikan mereka bekerja dengan harmoni. Dalam contoh kami, komponen bertindak sebagai pembalut untuk plugin, memaparkan senarai gambar kecil imej. Setiap kali kita mengklik pada lakaran kecil, versi yang lebih besar akan dipaparkan dalam Pratonton Imej. Ini hanya satu contoh, tetapi anda boleh mengintegrasikan mana -mana plugin jQuery yang diperlukan. Sekali lagi, kod tersebut boleh didapati di GitHub. Adakah anda menggunakan plugin jQuery dalam aplikasi Ember anda? Jika anda ingin membincangkannya, sila komen di bahagian di bawah.
Soalan Lazim Mengenai Mengintegrasikan JQuery Plug-in Ke Aplikasi Ember
Apakah tujuan mengintegrasikan pemalam jQuery ke dalam aplikasi Ember?
Mengintegrasikan pemalam jQuery ke dalam aplikasi Ember dapat meningkatkan fungsi dan pengalaman pengguna aplikasi anda dengan ketara. Plugin JQuery menyediakan pelbagai ciri seperti animasi, pengesahan bentuk, dan unsur -unsur interaktif yang dapat diintegrasikan dengan mudah ke dalam aplikasi Ember. Integrasi ini membolehkan pemaju memanfaatkan kuasa jQuery dan Ember untuk menggabungkan kesederhanaan dan fleksibiliti pemalam jQuery dengan keteguhan dan skalabilitas Ember.
bagaimana memasang jQuery dalam aplikasi Ember saya?
Untuk memasang jQuery dalam aplikasi Ember, anda boleh menggunakan Pengurus Pakej NPM. Jalankan arahan npm install --save @ember/jquery di terminal anda. Ini menambah jQuery kepada kebergantungan projek dan menjadikannya boleh dilaksanakan dalam permohonan itu.
Bagaimana menggunakan plugin jQuery dalam aplikasi Ember saya?
Selepas anda memasang jQuery, anda boleh menggunakan plug-in jQuery dalam aplikasi Ember anda dengan mengimportnya ke dalam komponen Ember yang berkaitan. Anda kemudian boleh menggunakan fungsi plugin mengikut dokumentasi plugin. Ingatlah untuk memastikan plugin serasi dengan versi jQuery yang anda gunakan.
Adakah terdapat masalah keserasian antara jQuery dan Ember?
Sering kali, jQuery dan Ember berfungsi dengan baik bersama -sama. Walau bagaimanapun, bergantung kepada versi jQuery dan Ember yang anda gunakan, mungkin terdapat beberapa isu keserasian. Sentiasa periksa dokumentasi untuk jQuery dan Ember untuk keserasian.
Bolehkah saya menggunakan plugin jQuery di Ember tanpa memasang jQuery?
Tidak, anda tidak boleh menggunakan plugin jQuery di Ember tanpa memasang jQuery. Plugin JQuery dibina di atas perpustakaan JQuery dan memerlukannya untuk dijalankan. Oleh itu, anda mesti terlebih dahulu memasang jQuery sebelum anda boleh menggunakan mana -mana plugin jQuery.
Bagaimana untuk mengemas kini jQuery dalam aplikasi Ember saya?
Untuk mengemas kini jQuery dalam aplikasi Ember, anda boleh menggunakan Pengurus Pakej NPM. Jalankan arahan npm update @ember/jquery di terminal anda. Ini akan mengemas kini jQuery ke versi terkini.
Bolehkah saya menggunakan pelbagai plugin jQuery dalam aplikasi Ember saya?
Ya, anda boleh menggunakan pelbagai plugin jQuery dalam aplikasi Ember anda. Walau bagaimanapun, sedar bahawa menggunakan terlalu banyak plugin boleh menjejaskan prestasi aplikasi anda. Sentiasa menguji permohonan anda dengan teliti selepas menambah plugin baru untuk memastikan ia masih berfungsi seperti yang diharapkan.
Bagaimana menyelesaikan masalah pemalam jQuery dalam aplikasi Ember?
Jika anda menghadapi masalah plugin jQuery dalam aplikasi Ember anda, periksa dokumentasi plugin untuk sebarang isu yang diketahui atau tip penyelesaian masalah. Jika anda masih menghadapi masalah, cuba hubungi pemaju plugin atau komuniti Ember untuk mendapatkan bantuan.
Bolehkah saya menggunakan plugin jQuery dalam aplikasi Ember saya tanpa pengalaman pengaturcaraan?
Walaupun anda boleh menggunakan plugin jQuery dalam aplikasi Ember anda tanpa pengalaman pengaturcaraan, disarankan agar anda memahami asas -asas JavaScript dan Ember. Ini akan memudahkan anda memahami cara mengintegrasikan dan menggunakan plugin dengan cekap.
Adakah terdapat alternatif untuk menggunakan plugin jQuery dalam aplikasi Ember saya?
Ya, ada alternatif untuk menggunakan plugin jQuery dalam aplikasi Ember. Ember sendiri mempunyai ekosistem tambahan tambahan yang dapat memberikan ciri-ciri yang sama dengan plugin jQuery. Di samping itu, anda boleh menggunakan JavaScript asli atau perpustakaan JavaScript lain untuk mencapai hasil yang sama. Walau bagaimanapun, plugin jQuery biasanya menyediakan penyelesaian yang lebih mudah dan lebih mudah.
Atas ialah kandungan terperinci Cara Mengintegrasikan Plugin JQuery ke dalam aplikasi Ember. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1673
14
1429
52
1333
25
1278
29
1257
24
Python vs JavaScript: Keluk Pembelajaran dan Kemudahan Penggunaan
Apr 16, 2025 am 12:12 AM
Python lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.
JavaScript dan Web: Fungsi teras dan kes penggunaan
Apr 18, 2025 am 12:19 AM
Penggunaan utama JavaScript dalam pembangunan web termasuk interaksi klien, pengesahan bentuk dan komunikasi tak segerak. 1) kemas kini kandungan dinamik dan interaksi pengguna melalui operasi DOM; 2) pengesahan pelanggan dijalankan sebelum pengguna mengemukakan data untuk meningkatkan pengalaman pengguna; 3) Komunikasi yang tidak bersesuaian dengan pelayan dicapai melalui teknologi Ajax.
JavaScript in Action: Contoh dan projek dunia nyata
Apr 19, 2025 am 12:13 AM
Aplikasi JavaScript di dunia nyata termasuk pembangunan depan dan back-end. 1) Memaparkan aplikasi front-end dengan membina aplikasi senarai TODO, yang melibatkan operasi DOM dan pemprosesan acara. 2) Membina Restfulapi melalui Node.js dan menyatakan untuk menunjukkan aplikasi back-end.
Memahami Enjin JavaScript: Butiran Pelaksanaan
Apr 17, 2025 am 12:05 AM
Memahami bagaimana enjin JavaScript berfungsi secara dalaman adalah penting kepada pemaju kerana ia membantu menulis kod yang lebih cekap dan memahami kesesakan prestasi dan strategi pengoptimuman. 1) aliran kerja enjin termasuk tiga peringkat: parsing, penyusun dan pelaksanaan; 2) Semasa proses pelaksanaan, enjin akan melakukan pengoptimuman dinamik, seperti cache dalam talian dan kelas tersembunyi; 3) Amalan terbaik termasuk mengelakkan pembolehubah global, mengoptimumkan gelung, menggunakan const dan membiarkan, dan mengelakkan penggunaan penutupan yang berlebihan.
Python vs JavaScript: Komuniti, Perpustakaan, dan Sumber
Apr 15, 2025 am 12:16 AM
Python dan JavaScript mempunyai kelebihan dan kekurangan mereka sendiri dari segi komuniti, perpustakaan dan sumber. 1) Komuniti Python mesra dan sesuai untuk pemula, tetapi sumber pembangunan depan tidak kaya dengan JavaScript. 2) Python berkuasa dalam bidang sains data dan perpustakaan pembelajaran mesin, sementara JavaScript lebih baik dalam perpustakaan pembangunan dan kerangka pembangunan depan. 3) Kedua -duanya mempunyai sumber pembelajaran yang kaya, tetapi Python sesuai untuk memulakan dengan dokumen rasmi, sementara JavaScript lebih baik dengan MDNWebDocs. Pilihan harus berdasarkan keperluan projek dan kepentingan peribadi.
Python vs JavaScript: Persekitaran dan Alat Pembangunan
Apr 26, 2025 am 12:09 AM
Kedua -dua pilihan Python dan JavaScript dalam persekitaran pembangunan adalah penting. 1) Persekitaran pembangunan Python termasuk Pycharm, Jupyternotebook dan Anaconda, yang sesuai untuk sains data dan prototaip cepat. 2) Persekitaran pembangunan JavaScript termasuk node.js, vscode dan webpack, yang sesuai untuk pembangunan front-end dan back-end. Memilih alat yang betul mengikut keperluan projek dapat meningkatkan kecekapan pembangunan dan kadar kejayaan projek.
Peranan C/C dalam JavaScript Jurubah dan Penyusun
Apr 20, 2025 am 12:01 AM
C dan C memainkan peranan penting dalam enjin JavaScript, terutamanya digunakan untuk melaksanakan jurubahasa dan penyusun JIT. 1) C digunakan untuk menghuraikan kod sumber JavaScript dan menghasilkan pokok sintaks abstrak. 2) C bertanggungjawab untuk menjana dan melaksanakan bytecode. 3) C melaksanakan pengkompil JIT, mengoptimumkan dan menyusun kod hot-spot semasa runtime, dan dengan ketara meningkatkan kecekapan pelaksanaan JavaScript.
Python vs JavaScript: Gunakan Kes dan Aplikasi Membandingkan
Apr 21, 2025 am 12:01 AM
Python lebih sesuai untuk sains data dan automasi, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python berfungsi dengan baik dalam sains data dan pembelajaran mesin, menggunakan perpustakaan seperti numpy dan panda untuk pemprosesan data dan pemodelan. 2. Python adalah ringkas dan cekap dalam automasi dan skrip. 3. JavaScript sangat diperlukan dalam pembangunan front-end dan digunakan untuk membina laman web dinamik dan aplikasi satu halaman. 4. JavaScript memainkan peranan dalam pembangunan back-end melalui Node.js dan menyokong pembangunan stack penuh.
