Блог

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

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

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

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

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

К сожалению, вы не можете выполнить привязку таким образом — вам нужно будет поделиться ссылкой на 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);
  

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

Тогда представлению 2 не нужна ссылка на представление 1. Чтобы изменить пример Эндрю Хэйра, вы бы сделали:

   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», возможно, вместо этого выбрав «Поле поиска: отправить» в качестве темы.