позвоночник.js - как общаться между представлениями?

У меня есть одностраничное веб-приложение с несколькими магистралями.вид на JS. Взгляды иногда должны взаимодействовать друг с другом. Два примера:

  1. когда есть два способа представления коллекции различными способами одновременно и нажмите на элемент в одном представлении должны быть переданы в другое представление.
  2. когда пользователь переходит к следующему этапу процесса, а первое представление передает данные второму.

отделить взгляды насколько это возможно, в настоящее время я использую пользовательские события для передачи данных ($(document).trigger('customEvent', data)). Есть ли лучший способ сделать это?

8
backbone.js javascript

3 ответов

один широко используемый метод расширяет Backbone.Events - объект для создания личного агрегатора глобальных событий.

var vent = {}; // or App.vent depending how you want to do this
_.extend(vent, Backbone.Events);

В зависимости от того, используете ли вы requirejs или что-то еще, вы можете разделить это на свой собственный модуль или сделать его атрибутом вашего объекта приложения. Теперь вы можете запускать и слушать события в любом месте вашего приложения.

// View1
vent.trigger('some_event', data1, data2, data3, ...);

// View2
vent.on('some_event', this.reaction_to_some_event);

Это также позволяет использовать агрегатор событий для связи между модели, коллекции, маршрутизатор etc. вот концепция Мартина Фаулера для агрегатора событий (не в javascript). А вот еще backboney реализация и размышление на эту тему больше в духе позвоночника.Марионетка, но большая ее часть применима к ванильному позвоночнику.

надеюсь, что это помогло!

14

Я согласен с @jakee в первой части

var vent = {}; 
_.extend(vent, Backbone.Events);

однако прослушивание глобального события с " on " может вызвать утечку памяти и проблему просмотра зомби, а также вызвать несколько вызовов обработчика действий и т. д.

вместо " on "вы должны использовать" listenTo " в своем представлении

 this.listenTo(vent, "someEvent", yourHandlerFunction);

таким образом, когда вы удалите свой вид view.remove() этот обработчик будет также удалена, потому что обработчик привязан к вашему мнению.

при запуске вашего глобального события, просто использовать

vent.trigger("someEvent",parameters);
8

jakee это предлагает прекрасный подход, который я сам использовал, но есть еще один интересный способ, и это ввести ссылку на объект в каждый экземпляр представления, а введенный объект, в свою очередь, содержит ссылки на столько представлений, сколько вы хотите объединить.

по сути, view-aggregator является своего рода объектом" App", и вещи рядом с представлениями могут быть прикреплены, например коллекции. Это связано с расширением представления(ов), и поэтому может не быть вкус каждого, но, с другой стороны, расширение служит простым примером для этого.

я использовал код в http://arturadib.com/hello-backbonejs/docs/1.html в качестве основы для моего ListView, а затем я получил следующее Для работы:

define(
    ['./listView'],

    function (ListView) {
        var APP = {
            VIEWS : {}
        }

        ListView.instantiator = ListView.extend({
            initialize : function() {
                this.app = APP;
                ListView.prototype.initialize.apply(this, arguments);
            }
        });

        APP.VIEWS.ListView = new ListView.instantiator();
        console.log(APP.VIEWS.ListView.app);
    }
);
0