Pertanyaan Backbone.js: komunikasi antar pandangan


Saya sedang mengerjakan aplikasi Backbone yang berisi daftar entri, sangat mirip dengan contoh aplikasi Todos (http://documentcloud.github.com/backbone/examples/todos/index.html).

Jadi, saya memiliki tampilan Aplikasi dan satu tampilan per item daftar. Sekarang, katakan saya memiliki tombol edit global. Tampilan Aplikasi akan menangani klik dan apa yang kemudian ingin saya lakukan adalah memberi tahu setiap tampilan daftar untuk menampilkan tombol hapus.

Dalam screenshot di bawah ini (dari Spotify), menekan tombol Edit menyebabkan semua tampilan daftar mengubah tampilan.

Apa cara terbaik untuk melakukan ini dengan Backbone. Saya perlu iterate atas semua tampilan daftar dan memanggil fungsi editMode. Tapi tampilan Aplikasi (di luar kotak) tidak tahu tentang tampilan daftar ..

enter image description here


32
2017-09-20 13:09


asal


Jawaban:


Saya menulis sebuah artikel beberapa waktu lalu tentang beberapa opsi berbeda untuk mengoordinasi antara tampilan: http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/

dalam kasus Anda, saya akan merekomendasikan penggunaan agregator acara yang saya jelaskan dalam artikel itu. Anda dapat memiliki setiap tampilan item untuk mendengarkan acara "editmode", atau sesuatu yang serupa. ketika peristiwa ini terjadi, setiap tampilan yang mendengarkannya akan memperbarui dirinya untuk masuk ke mode edit. maka Anda akan melakukan sebaliknya ketika Anda mengklik "selesai" - mengirim acara "viewmode", atau sesuatu yang serupa, dan memiliki setiap tampilan memperbarui dirinya dengan tepat.


41
2017-09-20 13:41



Dua sen saya: Ada "peretasan" sederhana yang dapat Anda lakukan dengan backbone.js untuk benar-benar memiliki pub / sub yang dapat berkomunikasi di antara tampilan:

Sesuatu di sepanjang garis-garis ini (belum dicoba):

var EventBus = Backbone.Model.extend({

   publish: function(event, args){

       this.trigger(event, args);

   },

   subscribe: function(event, args) {

       this.bind(event, args);

   }
});

Anda pada dasarnya mendapatkan ide itu. Sekarang untuk setiap tampilan, memilikinya 'mengikat' ke EventBus ini (karena tampilan hanya dapat mengikat ke model / koleksi di backbone) - Anda pada dasarnya hanya menggunakan nama metode mempublikasikan / berlangganan agar sinkron dengan nomenklatur model seperti itu tetapi Anda dapat memilih untuk tidak melakukannya. Buat saja kosong EventBus 'kelas' dalam kasus itu dan memiliki setiap tampilan yang mengikatnya :)

Jadi setiap tampilan hanya perlu digabungkan dengan ini EventBus dan bertindak atas peristiwa yang diterima! Backbone.js secara internal menangani semua perpipaan pola desain ini, jadi Anda cukup banyak mendapatkannya secara gratis :)

Kode di atas mungkin tidak berjalan apa adanya, tetapi ada untuk memberi Anda gambaran tentang itu ...


2
2017-09-23 20:18