Tampilan vs Komponen di Ember.js

143

Saya belajar bara.js, dan saya mencoba memahami perbedaan antara pandangan dan komponen. Saya melihat keduanya sebagai cara membuat komponen yang dapat digunakan kembali.

Dari situs web Ember pada tampilan:

Tampilan di Ember.js biasanya hanya dibuat untuk alasan berikut:
-Ketika Anda membutuhkan penanganan peristiwa pengguna yang canggih
-Ketika Anda ingin membuat komponen yang dapat digunakan kembali

Dari situs web Ember tentang komponen:

Komponen adalah tag HTML khusus yang perilakunya Anda terapkan menggunakan JavaScript dan yang penampilannya Anda uraikan menggunakan templat Templat. Mereka memungkinkan Anda untuk membuat kontrol yang dapat digunakan kembali yang dapat menyederhanakan templat aplikasi Anda.

Jadi apa perbedaan utama antara tampilan dan komponen? Dan apa yang akan menjadi contoh umum di mana saya lebih suka menggunakan tampilan atas komponen dan sebaliknya?

javascript ember.js handlebars.js Bradley Trager
sumber

Jawaban:

170

Ember.View

Sebuah Ember.View saat ini terbatas untuk tag yang dibuat untuk Anda oleh W3C. Tetapi jika Anda ingin mendefinisikan tag HTML khusus aplikasi Anda sendiri dan kemudian menerapkan perilakunya menggunakan JavaScript? Anda tidak dapat melakukan ini dengan Ember.View .

Ember.Component

Itulah komponen yang memungkinkan Anda melakukannya. Bahkan, itu ide yang bagus bahwa W3C saat ini sedang mengerjakan spec Elemen Kustom .

Implementasi komponen Ember berusaha sedekat mungkin dengan spesifikasi Komponen Web. Setelah Elemen Kustom tersedia secara luas di browser, Anda harus dapat dengan mudah melakukan migrasi komponen Ember Anda ke standar W3C dan membuatnya dapat digunakan oleh kerangka kerja lain yang juga telah mengadopsi standar baru.

Ini sangat penting bagi kami sehingga kami bekerja sama dengan badan-badan standar untuk memastikan implementasi komponen kami sesuai dengan peta jalan platform web.

Juga penting untuk dicatat adalah bahwa Ember.Component sebenarnya adalah Ember.View (subclass) tetapi itu benar - benar terisolasi . Akses properti di templatnya pergi ke objek tampilan dan tindakan ditargetkan juga pada objek tampilan . Tidak ada akses ke sekitarnya contextatau di luar controller semua informasi kontekstual dilewatkan , yang tidak terjadi dengan Ember. Lihat yang memang memiliki akses ke pengontrol sekitarnya, misalnya di dalam tampilan Anda bisa melakukan sesuatu seperti this.get('controller')yang akan memberi Anda controller saat ini terkait dengan tampilan.

Jadi apa perbedaan utama antara tampilan dan komponen?

Jadi, perbedaan utama selain komponen yang memungkinkan Anda membuat tag Anda sendiri dan di beberapa titik di masa depan ketika Elemen Kustom tersedia juga memigrasikan / menggunakan komponen-komponen itu dalam kerangka kerja lain yang akan mendukung elemen kustom, adalah bahwa pada titik tertentu komponen bara akan membuat tampilan agak usang tergantung pada kasus implementasi spesifik.

Dan apa yang akan menjadi contoh umum di mana saya lebih suka menggunakan tampilan atas komponen dan sebaliknya?

Mengikuti hal di atas ini sangat tergantung pada kasus penggunaan Anda. Tetapi sebagai patokan, jika Anda memerlukan akses pada pengontrol sekitarnya, dll. Gunakan Ember.View , tetapi jika Anda ingin mengisolasi tampilan dan hanya menyampaikan informasi yang diperlukan untuk membuatnya konteks-agnostik dan jauh lebih dapat digunakan kembali, gunakan Ember.Component .

Semoga ini bisa membantu.

Memperbarui

Dengan publikasi Road to Ember 2.0 Anda sekarang dianjurkan untuk menggunakan Komponen, bukan Tampilan di sebagian besar kasus.

intellivepixel
sumber
1
Satu-satunya kekhawatiran saya tentang komponen adalah ketika mereka menjadi kompleks. Saya belum tahu bagaimana memisahkan bagian logika dari bagian rendering. Saya melihat secara teratur, Anda memiliki pemisahan ini, dan dapat menempatkan logika ke controller, tetapi dengan komponen, saya cenderung mengatakan Anda akan berakhir dengan memiliki yang sangat kompleks, dan mungkin kekacauan besar di dalamnya. Apakah Anda tahu apakah mungkin untuk menentukan seperti-controller khusus untuk komponen? Atau mungkin komponen tidak dimaksudkan untuk mengelola elemen grafis yang kompleks.
sly7_7
3
@ sly7_7, ya saya mengerti maksud Anda. Tapi saya akan menganggap komponen sebagai kotak hitam, berperilaku hanya berdasarkan data yang diteruskan. Dan ya tergantung pada apa yang dilakukannya ini bisa menjadi berantakan dengan sangat cepat. Pengontrol khusus akan sangat masuk akal, dan cara kerjanya adalah jika komponen bisa menjadi logika yang disuntikkan ke dalamnya, tapi sejauh yang saya tahu komponen bukan bagian dari wadah bara menurut desain, saya kira, tetapi mungkin akan berubah di masa depan untuk selesaikan sesuatu seperti ini. Poin bagusnya!
intuitifivepixel
2
bisakah ada binding yang keluar dari komponen? Yaitu, dengan bentuk blok suatu komponen dapat elemen konten di blok mengikat properti komponen, atau haruskah saya menggunakan tampilan dalam kasus ini?
Michael Johnston
2
ah, ya mereka bisa. {{view.xxxx}}bekerja di komponen yang sama seperti dalam tampilan.
Michael Johnston
Komentar Tom Dale tentang topik ini: ember.zone/the-confusion-around-ember-views-and-components/…
Akshay Rawat
17

Jawabannya sederhana: gunakan komponen

Menurut video pelatihan yang direkam pada Agustus 2013, Yehuda Kats dan Tom Dale (Anggota Tim Inti Ember) mengatakan kepada para penonton untuk tidak menggunakan tampilan kecuali Anda seorang pengembang kerangka kerja. Mereka telah membuat banyak peningkatan pada Setang dan Komponen yang diperkenalkan, sehingga tampilan tidak lagi diperlukan. Tampilan digunakan secara internal untuk memberi daya pada hal-hal seperti {{#if}} dan {{outlet}}.

Komponen juga sangat mirip dengan standar Komponen Web yang akan dibangun di peramban, sehingga ada banyak manfaat sampingan untuk menjadi nyaman membangun Komponen Ember.

Pembaruan 2014-11-27

Lebih penting lagi sekarang menggunakan komponen daripada tampilan, karena Ember 2.0 akan menggunakan Komponen yang Dapat Diarahkan saat rute dimasukkan, bukan pengontrol / tampilan. Agar bukti aplikasi Anda di masa mendatang, yang terbaik adalah menjauh dari Views.

Sumber:

Johnny Oshika
sumber
5
"Jika Anda merasa perlu menggunakan tampilan, gunakan Komponen sebagai gantinya." adalah nasihat yang mengerikan, dan mengkhianati kurangnya pemahaman tentang isolasi yang melibatkan komponen.
jmcd
@ jmcd, meskipun komentar itu berasal dari framework framework sendiri, saya mengeluarkannya.
Johnny Oshika
2
Saya menemukan sumber: Pelatihan video Gaslight, video 10.3 Komponen Q&A @ 26m. Tom berkata: '' Karena contoh-contoh itu ditulis, ... kami telah menambahkan Komponen [yang] tidak ada ketika contoh-contoh itu ditulis. Secara umum saya akan mengatakan Tampilan bukan sesuatu yang kita harapkan sebagian besar pengembang untuk menulis, mereka lebih dari objek pembukuan internal pada titik ini '
jmcd
2
@ jmcd, Dalam video itu @ 26:15, Tom mengatakan "pada dasarnya jangan gunakan Tampilan". Juga, jika Anda melompat ke 30m dalam video yang sama, Yehuda Katz mengatakan: "Tampilan pada dasarnya adalah detail implementasi internal ... Anda bisa menggunakan Tampilan, tetapi kemudian Anda adalah pengembang kerangka kerja. Anda sebaiknya menggunakan salah satu hal yang kami buat untuk Anda yang menggunakan Tampilan, dan yang paling dekat dengan Tampilan tetapi memiliki semantik yang lebih baik adalah Komponen. Apa pun yang Anda bisa gunakan dengan Tampilan sebelumnya, Komponen baik-baik saja. "
Johnny Oshika
5

Seperti yang ada sekarang - v2.xmenjadi rilis stabil saat ini - tampilan telah sepenuhnya ditinggalkan. Dikatakan bahwa pandangan sedang dihapus dari Ember 2.0 API .

Jadi, menggunakan {{view}}kata kunci di Ember 2.0 akan memicu pernyataan:

Pernyataan Gagal: Menggunakan {{view}}atau jalur apa pun yang didasarkan padanya telah dihapus di Ember 2.0

Jika Anda harus menggunakan tampilan dalam Ember 2.0 Anda dapat menggunakan addon bara-legacy-views , yang akan kompatibel dengan Ember hingga versi 2.4 .

Jadi, untuk meringkas - komponen adalah sekarang (pandangan dihapus) dan masa depan - mereka juga akan menggantikan pengontrol. Lihat Komponen Routable RFC .

Daniel Kmak
sumber