Dalam artikel sebelumnya, saya memperkenalkan Anda pada pengalaman belajar Anda memberikan nilai -nilai di antara pandangan di tulang punggung. Artikel ini berfokus pada memperkenalkan tiga cara komunikasi antara pandangan tulang punggung.
Bagian paling kritis untuk menguasai kerangka kerja MVC adalah menguasai cara berkomunikasi di antara berbagai pandangan. Ketika saya menggunakan Angular sebelumnya, saya berpikir bahwa metode komunikasi berbasis acara ($ on, $ emit, $ boardcast) atau metode berbasis layanan sangat berguna. Setelah pindah ke tulang punggung, karena pemahaman yang tidak memadai tentang mekanisme acara Backbone dan penggunaan yang sangat fleksibel, metode komunikasi yang baik belum ditemukan. Sampai saya melihat artikel ini, penulis menggunakan contoh sederhana untuk menjelaskan tiga cara komunikasi antara tampilan tulang punggung dengan jelas. Terjemahannya adalah sebagai berikut:
Halaman web yang saya kembangkan memiliki dua bagian utama, yaitu dokumen dan bilah samping.
Seperti yang ditunjukkan pada gambar di atas, saya mengatur tiga tampilan:
ApplicationView - berisi tampilan yang lebih rendah sebagai tampilan terluar
DocumentView - Menampilkan konten yang sedang diedit atau dijelajahi
Sidebarview - Tampilkan beberapa informasi terkait dokumen
DocumentView dan SiderbarView adalah subview dari ApplicationView, sehingga struktur tampilan keseluruhan ditunjukkan pada gambar di bawah ini:
Pengguna beroperasi di subview apa pun, dan subview lain perlu diubah sesuai. Tetapi karena dua pandangan anak tidak dapat secara langsung memberi tahu pihak lain (yaitu, cakupannya tidak terkait langsung, tidak seperti pandangan orang tua, yang dapat berisi cakupan semua pandangan anaknya), saya memerlukan mekanisme acara.
Setelah saya mencari di Google dan merujuk pada metode orang lain, saya merangkum tiga cara komunikasi yang berbeda berikut.
1. Lulus acara melalui tampilan orang tua
Saya lulus acara untuk dua tampilan anaknya melalui tampilan induk (ApplicationView). Karena tampilan induk berisi ruang lingkup semua pandangan anaknya, yang terbaik adalah menggunakannya sebagai media untuk pengiriman acara.
Kode JavaScript adalah sebagai berikut:
var applicationView = backbone.view.extend ({initialize: function () {this.documentView = new DocumentView ({Parent: this}); this.sideBarView = new sidebarview ({pewaris: ini}); this.documentView.on ('Edit', this.documented: this.documentedededed: {eded: {{this.documented: {this. stufThis.sideBarView.trigger ('DocumentEdit');}}); var documentView = backbone.view.extend ({onEdit: function () {this.trigger ('edit');}}); var sidebarview = backbone.view.extend ({{{{{{{{{{{{{); ini);}, ondocumentedit: function () {// Bereaksi terhadap edit dokumen.}});Namun, metode ini tidak efisien. Karena saya perlu menambahkan pawang acara tambahan ke ApplicationView Documentedited (). Jika sekelompok peristiwa dilewati dalam tampilan anak, fungsi event handler akan terus dipicu dalam tampilan induk, menyebabkannya kewalahan.
Lalu mari kita lihat metode kedua.
2. Komunikasi antara pandangan melalui Eventbus
Saya membuat objek global Eventbus dengan mewarisi backbone.events. Menyuntikkannya ke setiap subview untuk menyiarkan acara.
Kode JavaScript adalah sebagai berikut:
var applicationView = backbone.view.extend ({initialize: function () {this.eventbus = _.extend ({}, backbone.events); this.documentView = new DocumentView (eventBus: this.eventbus}); this.sideBarView = SideBaruSe (eventBus: {eventBus {ini); this.sideBarView = sideBaruL (eventBus: {eventBus {eventBus {eventBus); this. this.eventbus});},}); var documentView = backbone.view.extend ({initialize: function (options) {this.eventbus = option.eventBus;}, onEdit: function () {this.eventbus.trigger ('documentedit');} {) {{this.eventBus.trigger ('documentedit');} {{{this.eventbus.trigge ('documentedit'); {{{{this.eventbus ('var function (options) {this.eventbus = options.eventbus; this.eventbus.on ('documentedit', this.ondocumentedit, this);}, ondocumentedit: function () {// bereaksi terhadap edit dokumen.}});Dalam metode ini, saya menggunakan Eventbus sebagai objek global untuk mendaftarkan acara. Jika saya ingin berkomunikasi di antara pandangan, saya hanya perlu menyuntikkan Eventbus ke dalam tampilan dan saya dapat dengan mudah memicu atau mendengarkan acara melalui itu.
Catatan: Jika Anda tidak ingin membuat objek global, Anda masih dapat membuat Eventbus di modul atau tingkat tampilan untuk komunikasi.
Metode ini sudah jauh lebih baik daripada metode pertama. Namun, kita perlu memperkenalkan Eventbus secara manual di Subview, yang menunjukkan bahwa masih ada ruang untuk perbaikan. Jadi mari kita lihat metode ketiga.
3. Gunakan tulang punggung secara langsung sebagai mesin pendaftaran acara
Dalam metode kedua, saya membuat Eventbus terpisah yang diwarisi dari backbone.events. Tetapi baru -baru ini saya menyadari bahwa objek backbone itu sendiri adalah objek yang memadukan acara, jadi saya langsung menggunakan tulang punggung untuk menyiarkan acara, jadi saya tidak perlu membuat Eventbus lain.
Dan objek backbone dapat dipanggil secara langsung sehingga saya tidak harus menyuntikkannya secara manual di setiap subview.
Kode JavaScript adalah sebagai berikut:
var applicationView = backbone.view.extend ({initialize: function () {this.documentView = new DocumentView (); this.sideBarView = new sidebarview ();},}); var documentView = backbone.view.extend ({oNDit: function () {backbone.trocerber ({{oNDit: function () {var backbone.priding) ({{{{{{{{{{{{{) {function () {) {) {) {) {) {) {) {) {) {) {) Backbone.view.extend ({initialize: function (options) {backbone.on ('documentedit', this.ondocumentedit, this);}, ondocumentedit: function () {// bereaksi terhadap dokumen edit.}});Meringkaskan
Saya akhirnya menggunakan metode ketiga dalam proyek saya. Dan menurut saya, meskipun secara langsung bergantung pada objek backbone global, sangat ringkas untuk digunakan.