Как передавать данные из одного представления в другое с помощью настраиваемых событий?

Скажем, у меня есть представление, которое отображает окно поиска с кнопкой отправки. Когда я нажимаю кнопку отправки, как передать значение окна поиска в другое представление?

Я пробовал:
В поле зрения 1, внутри обратного вызова submit: this.trigger('abc', $('#searchBox').val())
В представлении 2, в функции инициализации: this.bind('abc', function(data){ console.log(data); })

но это не работает: пользовательское событие запущено, но View 2 не видит его.

Ответы

Ответ 1

К сожалению, вы не можете привязать этот путь - вам нужно будет предоставить ссылку на view1 в view2:

var View2 = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, 'foo');
        this.view1.bind('abc', this.foo);        
    },
    foo: function(data) {
        console.log(data);
    }
});

Это также означает, что в какой-то момент вам нужно установить view1 в свой экземпляр View2, чтобы вы могли привязать его.

Если вы не хотите передавать ссылки вокруг, просто привяжите два представления вместе в любом контейнере, в котором вы их удерживаете (например, в другом представлении или контроллере):

var view1 = new View1();
var view2 = new View2();

view1.bind('abc', view2.foo);

Ответ 2

Вот отличная статья Дерика Бэйли @LosTechies.com: Ссылки, маршрутизация и агрегатор событий: координация просмотров в Backbone.js

В этой статье рассматривается простое решение с использованием PubSub, встроенного в Backbone.JS. Я согласен с Дериком, когда он упоминает, что мнения должны быть развязаны.

Ответ 3

Я предлагаю использовать структуру PubSub в дополнение к основному. MinPubSub - популярный выбор. Я использую расширение jubsery pubsub, извлеченное из https://github.com/phiggins42/bloody-jquery-plugins.

Затем View 2 не нуждается в ссылке на View 1. Чтобы изменить пример Andrew Hare, вы должны:

  var View2 = Backbone.View.extend({
      initialize: function() {
          _.bindAll(this, 'foo');
          $.subscribe('abc', this.foo);        
      },
      foo: function(data) {
          console.log(data);
      }
  });

Тогда в представлении 1:

$.publish('abc', $('#searchBox').val());

Конечно, с системой pubsub вы, вероятно, захотите использовать что-то лучше, чем "abc", возможно, вместо этого выберите "searchBox: submit" в качестве темы.