Memahami Komponen di Ember 2

mata utama

Komponen Ember adalah teras aplikasi Ember, yang membolehkan pemaju untuk menentukan tag HTML khusus, aplikasi khusus dan melaksanakan tingkah laku mereka menggunakan JavaScript. Dalam Ember 2.x, komponen menggantikan pandangan dan pengawal.
Komponen Ember mengandungi fail templat hendal dan kelas Ember yang sepadan. Komponen ini boleh digunakan dengan komponen lain, dan bahkan boleh bersarang dalam komponen induk dan mempunyai sifat yang serupa dengan unsur -unsur HTML asli.
Data dinamik boleh ditambah kepada aplikasi Ember melalui model (objek yang mewakili data asas aplikasi yang dibentangkan kepada pengguna). Ini membolehkan penciptaan komponen interaktif dan dinamik.
Interaksi pengguna boleh ditambah kepada komponen menggunakan tindakan (tindakan yang dihantar ke kelas komponen). Tindakan ini boleh digunakan untuk membuat unsur -unsur interaktif, seperti tab yang boleh diklik yang memaparkan kandungan yang berbeza.

Artikel ini telah dikaji semula oleh Edwin Reynoso dan Nilson Jacques. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk mendapatkan kandungan SitePoint untuk yang terbaik! Mereka membolehkan anda menentukan tag HTML khusus anda sendiri dan melaksanakan tingkah laku mereka menggunakan JavaScript. Bermula dengan Ember 2.x, komponen akan menggantikan pandangan dan pengawal (tidak ditetapkan) dan merupakan cara yang disyorkan untuk membina aplikasi Ember. Pelaksanaan komponen Ember mengikuti spesifikasi komponen web W3C sebanyak mungkin. Sebaik sahaja elemen tersuai boleh didapati secara meluas dalam penyemak imbas, ia harus mudah untuk memindahkan komponen Ember ke standard W3C dan menjadikannya boleh digunakan oleh rangka kerja lain.

Jika anda ingin mengetahui lebih lanjut tentang mengapa komponen yang boleh diperbaiki menggantikan pengawal dan pandangan, lihat video pendek ini oleh ahli pasukan Ember Core Yehuda Katz dan Tom Dale.

aplikasi penukar tab

Untuk mendapatkan wawasan tentang komponen Ember, kami akan membina widget Switcher Tab. Ini akan mengandungi satu set tab dengan kandungan yang berkaitan. Mengklik pada tab akan memaparkan kandungan tab itu dan menyembunyikan kandungan tab lain. Cukup sederhana? Mari bermula.

Seperti biasa, anda boleh mencari kod untuk tutorial ini pada repositori GitHub kami atau ini Ember Twiddle jika anda ingin bereksperimen dengan kod dalam penyemak imbas anda.

komposisi komponen Ember

Komponen Ember mengandungi fail templat hendal dan kelas Ember yang sepadan. Kelas ini hanya perlu dilaksanakan apabila kita perlu mempunyai interaksi tambahan dengan komponen. Komponen digunakan dengan cara yang sama dengan tag HTML biasa. Apabila kita membina komponen penukar tab, kita akan dapat menggunakannya seperti ini:

Fail templat komponen Ember terletak di direktori App/Templates/Components. Fail kelas terletak di apl/komponen. Kami menggunakan semua huruf kecil, dipisahkan oleh tanda hubung antara kata -kata untuk menamakan komponen Ember. Ini dinamakan sebagai konvensyen, yang boleh mengelakkan konflik nama dengan komponen web HTML masa depan.

Komponen Ember Utama kami akan menjadi Tab-Switcher. Perhatikan bahawa saya bercakap tentang komponen utama, kerana kita akan mempunyai beberapa komponen. Anda boleh menggunakan komponen bersempena dengan komponen lain. Anda juga boleh komponen sarang dalam komponen ibu bapa yang lain. Dalam kes tab-switcher kami, kami akan mempunyai satu atau lebih komponen item tab seperti yang ditunjukkan di bawah:

<code>{{tab-switcher}}{{/tab-switcher}}</code>

Seperti yang anda lihat, komponen juga boleh mempunyai sifat seperti elemen HTML asli.

Buat Projek Ember 2.x

Untuk mengikuti tutorial ini, anda perlu membuat projek Ember 2.x. Kaedahnya adalah seperti berikut:

Ember dipasang menggunakan npm. Lihat di sini untuk tutorial pada npm.

<code>{{#each tabItems as |tabItem| }}
  {{tab-item item=tabItem 
             setSelectedTabItemAction="setSelectedTabItem" }}
{{/each}}</code>

Pada masa menulis artikel ini, ini akan memperkenalkan versi 1.13

<code>npm install -g ember-cli
</code>

Seterusnya, buat aplikasi Ember baru:

<code>ember -v
=> version: 1.13.8
</code>

Navigasi ke direktori ini dan edit fail Bower.json untuk mengandungi versi terkini Ember, Ember-Data, dan Ember-Load-Initializers:

<code>ember new tabswitcher</code>

kembali ke terminal dan jalankan:

<code>{
  "name": "hello-world",
  "dependencies": {
    "ember": "^2.1.0",
    "ember-data": "^2.1.0",
    "ember-load-initializers": "^ember-cli/ember-load-initializers#0.1.7",
    ...
  }
}
</code>

Bower boleh meminta anda untuk menghuraikan versi Ember. Pilih versi 2.1 dari senarai yang disediakan dan awalannya dengan tanda seru untuk meneruskan resolusinya kepada Bower.json.

Seterusnya memulakan pelayan pembangunan Ember CLI:

<code>bower install
</code>

Navigasi terakhir ke http: // localhost: 4200/dan periksa versi konsol penyemak imbas.

Buat komponen penukar tab

mari kita buat komponen penukar tab menggunakan penjana terbina dalam Ember:

<code>ember server</code>

Ini akan membuat tiga fail baru. Salah satunya ialah fail hendal html kami (app/templates/komponen/tab-switcher.hbs), yang kedua adalah fail javascript kelas komponen kami (app/komponen/tab-switcher.js), dan yang terakhir adalah fail ujian (ujian/ integrasi/komponen/tab-switcher-test.js). Komponen ujian tidak berada dalam skop tutorial ini, tetapi anda boleh membaca lebih lanjut mengenainya di laman web Ember.

Sekarang jalankan Ember Server untuk memuatkan pelayan dan menavigasi ke http: // localhost: 4200/. Anda harus melihat mesej selamat datang bertajuk "Selamat Datang ke Ember". Jadi mengapa komponen kami tidak dipaparkan? Nah, kita belum menggunakannya, jadi mari kita gunakan sekarang.

Menggunakan komponen

Buka aplikasi templat aplikasi/templat/aplikasi.hbs. Tambah yang berikut selepas tag H2 menggunakan komponen.

<code>ember generate component tab-switcher</code>

Di Ember, komponen boleh digunakan dalam dua cara. Kaedah pertama, yang dipanggil bentuk inline , adalah menggunakannya tanpa sebarang kandungan. Itulah yang kita lakukan di sini. Kaedah kedua dipanggil bentuk blok , yang membolehkan templat hendal dihantar ke komponen dan diberikan templat di mana ungkapan {{yield}} muncul dalam template komponen. Dalam tutorial ini, kami akan berpegang pada bentuk sebaris. Walau bagaimanapun, ini masih tidak menunjukkan apa -apa di skrin. Ini kerana komponen itu sendiri tidak mempunyai apa -apa untuk dipaparkan. Kami boleh mengubahnya dengan menambahkan baris berikut ke fail templat komponen (app/templat/komponen/tab-switcher.hbs):

<code>{{tab-switcher}}{{/tab-switcher}}</code>

Sekarang, apabila halaman dimuat semula (yang sepatutnya berlaku secara automatik), anda akan melihat teks yang ditunjukkan di atas. Momen yang menarik!

membuat komponen projek tab

Sekarang bahawa kami telah menubuhkan komponen tab-switcher utama kami, mari buat beberapa komponen tab-item untuk bersarang di dalamnya. Kita boleh membuat komponen tab-tab baru seperti ini:

<code>{{#each tabItems as |tabItem| }}
  {{tab-item item=tabItem 
             setSelectedTabItemAction="setSelectedTabItem" }}
{{/each}}</code>

Sekarang tukar fail hendal komponen baru (app/templat/komponen/tab-item.hbs) ke:

<code>npm install -g ember-cli
</code>

Seterusnya, mari sarang tiga tab-item dalam komponen tab-switcher utama kami. Tukar Fail Templat Tab-Switcher (App/Templates/Components/Tab-Switcher.hbs) ke:

<code>ember -v
=> version: 1.13.8
</code>

Seperti yang disebutkan di atas, fungsi pembantu hasil akan menjadikan mana -mana templat hendal yang dihantar kepada komponen kami. Walau bagaimanapun, ini hanya berguna jika kita menggunakan tab-switcher dalam bentuk blok. Oleh kerana kami tidak melakukan ini, kami dapat mengeluarkan fungsi pembantu hasil sepenuhnya.

Sekarang, apabila kita melihat penyemak imbas, kita akan melihat tiga komponen tab-item, semuanya memaparkan "Tajuk Item Tab". Komponen kami kini agak statik, jadi mari tambah beberapa data dinamik.

(selebihnya adalah sama dengan output terdahulu, kecuali bahawa perenggan disusun semula dan dikatakan untuk mengekalkan konsistensi kandungan dan mengelakkan pertindihan. Untuk menjimatkan ruang, output bahagian yang tinggal tidak diulangi di sini.)

Atas ialah kandungan terperinci Memahami Komponen di Ember 2. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!