Pertanyaan Bagaimana cara membuat satu pandangan menyadari perubahan orang lain?


Misalkan Anda membuat aplikasi perpustakaan musik.

Anda memiliki satu tampilan dengan daftar pada genre dan genre lain yang menunjukkan konten genre yang dipilih. Ketika pengguna mengklik genre pada daftar, konten dalam tampilan lain harus diperbarui sesuai.

Apa cara terbaik untuk melakukan ini sehingga ada dependensi minimal?

Saya belum menemukan tempat lain untuk mendengarkan klik mouse daripada tampilan yang menggambarkan genre individual. Saya dapat mengirim acara dari sana, tetapi bagaimana cara optimal untuk mendapatkan acara tersebut untuk memperbarui tampilan lain yang menggambarkan konten genre? Siapa yang harus mendengarkan acara itu, tampilan konten genre atau koleksinya?

EDIT: Saya memberi contoh kedua pandangan dari router aplikasi dan saya berhasil membuatnya bekerja dengan membuat pandangan saling mengetahui satu sama lain, tetapi itu tidak optimal tentunya.


4
2018-05-22 07:13


asal


Jawaban:


Anda dapat membuat model sederhana untuk menyimpan status aplikasi, Anda tidak perlu sesuatu yang mewah, hanya sekantong data yang mengimplementasikan metode acara Backbone biasa:

var AppState  = Backbone.Model.extend({});
var app_state = new AppState();

Kemudian tampilan daftar genre akan mendengarkan peristiwa klik (seperti yang sudah Anda miliki) dan mengatur genre saat ini pada model aplikasi-negara ketika seseorang mengubahnya:

var Genres = Backbone.View.extend({
    //...
    choose: function(ev) {
        // This would be the click handler for the genre,
        // `.html()` is just for demonstration purposes, you'd
        // probably use a data attribute in real life.
        app_state.set({genre: $(ev.target).html() });
    },
});

Pandangan untuk genre individu akan mendengarkannya "change:genre" acara pada model aplikasi-negara dan bereaksi saat genre berubah:

var Genre = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, 'change_genre');
        app_state.on('change:genre', this.change_genre);
    },
    //...
    change_genre: function() {
        // Refill the genre display...
    }
});

Demo: http://jsfiddle.net/ambiguous/mwBKm/1/

Anda dapat membuat model untuk data apa pun yang Anda inginkan dan model adalah cara mudah untuk bekerja dengan peristiwa data di Backbone. Sebagai bonus tambahan, pendekatan ini membuatnya cukup mudah untuk mempertahankan status aplikasi Anda: cukup tambahkan dukungan persistensi Backbone biasa untuk AppState dan pergi kamu pergi.


Jika Anda hanya membutuhkan bus kejadian sederhana untuk mendorong aktivitas non-data, Anda dapat menggunakan Backbone's Events metode untuk membangun agregator acara sederhana:

app.events = _.extend({}, Backbone.Events);

Kemudian, anggaplah Anda memiliki global app namespace, Anda dapat mengatakan hal-hal seperti ini:

app.events.on('some-event', some_function);

dan

app.events.trigger('some-event', arg1, arg2, ...);

14
2018-05-22 07:46



Cara terbaik yang pernah saya lihat adalah metode yang diusulkan oleh Derick Bailey. Singkatnya Anda dapat membuat agregator acara, yang menyediakan objek terpusat untuk membesarkan acara yang dapat dilihat oleh berbagai tampilan berbeda. Keindahan solusi ini adalah sangat mudah untuk diterapkan karena memanfaatkan sistem acara Backbone yang sudah ada.


1
2018-06-04 04:04