Backbone.Radio для межкомпонентной связи

Question

Say У меня есть два компонента на странице, где пользователь может взаимодействовать с одной и другой должны обновить, что-то вроде ниже:

component A  | component B 
        | 
- option 1 link | "stuff related to option 1" 
- option 2 link | 

Теперь, когда мы щелкаем option 2 link мы хотим обновить компонент B.

MarionetteJS использует (или будет так в следующем основном выпуске) Backbone.Radio.

Я хотел бы знать лучший способ сделать это. 2 вещи приходят на ум:

1: Используйте тот же канал в обоих компонентах

// Component A 
// ... 
onOptionClick: function (evt) { 
    Backbone.Radio.channel('AvsB').request('update:b', {id: this.model.get('id')}); 
} 

// Component B 
// ... 
initialize: function() { 
    Backbone.Radio.channel('AvsB').reply('update:b', function() { 
    // update contents... 
    } 
} 

2: Отделить еще больше, с помощью посредника, например: компоненты должны использовать только свой «собственный» канал.

// Component A 
// ... 
onOptionClick: function (evt) { 
    Backbone.Radio.channel('compA').request('option:isUpdated', {id: this.model.get('id')}); 
} 

// Mediator (eg. main.js, a controller, or whatever high-level object) 
var channelCompA = Backbone.Radio.channel('compA'); 
var channelCompB = Backbone.Radio.channel('compB'); 
channelCompA.reply('option:isUpdated', channelCompB.request('content:shouldUpdate')); 

// Component B 
// ... 
initialize: function() { 
    Backbone.Radio.channel('compB').reply('content:shouldUpdate', function() { 
    // update contents... 
    } 
} 

Вариант 2 - больше работы и кажется немного ненужным. Но я не могу пошатнуть чувство, что вариант 1 все еще слишком специфичен. В конце концов, компонент A не должен заботиться о том, что компонент B существует.

Answer 1

Я думаю, что опция 2 излишне сложна.

В принципе, вы спрашиваете, подходит ли шаблон агрегатора событий или шаблон посредника. Главное, чтобы иметь в виду, что они и решения для тесной связи. Это скрывается в вашем примере, потому что вы называете запросы после компонента ("update:b). Это источник связи, а не тот факт, что вы используете тот же канал.

Более конкретно, если компонент A и компоненту B действительно не нужно знать друг о друге, тогда их имена не должны быть частью API, который является именем запроса. Запрос должен быть назван после фактической работы, которая должна быть выполнена (performUpdate, возможно?), а не после того, как он делает свою работу.

Конечно, все же может иметь смысл использовать разные каналы для целей организации или назначения имен. И шаблон Mediator определенно использует его (например, если вам нужно перехватить запросы и каким-то образом изменить их). t нет смысла использовать его только для слепого маршрута запросов в попытке избежать соединения.

Возможно, вы создали this article создателем Marionette, так как он обсуждает ту же проблему.