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

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

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

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

10
backbone.js

3 ответов

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

вот отличная статья на Дерик Bailley @ LosTechies.com: Ссылки, Маршрутизация И Агрегатор Событий: Координация Представлений В Магистрали.js

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

6

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

тогда View 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", возможно, вместо этого выберите" searchBox:submit " в качестве темы.

1