[JS] Jak nasłuchiwać zdarzeń z innych widoków w YUI3?

// app-service.js
YUI.add('app-service', function (Y) {
  'use strict';
 
  Y.namespace('myApp');
 
  Y.myApp.AppService = Y.Base.create('appService', Y.ViewService /* niestandardowa baza dla serwisów */, [], {
    initializer : function () {
      // nasłuchujemy zdarzeń z widoku widgetu
      this.on('get:widgetdata', this._getWidgetData);
      // nasłuchujemy zdarzeń z widoku elementu widgetu (wiersza)
      this.on('get:widgetitemdata', this._getWidgetItemData);
    },
    _getWidgetData : function (event) {
      // pobieramy dane, które są potrzebne do wygenerowania widgetu
      Y.io('sample/data.php', {
        on : {
          success : function (response) {
            // w tym przypadku, event.target jest to referencja do widoku widgetu
            // i w tym widoku aktualizujemy wartość własności widgetData
            event.target.set('widgetData', response);
          }
        }
      });
 
      return this;
    },
    _getWidgetItemData : function (event) {
      var that = this;
 
      // pobieramy dane, które są potrzebne do wygenerowania widgetu
      Y.io('sample/itemData.php', {
        on : {
          success : function (response) {
            var itemModel = that.get('widgetItemModel');
 
            itemModel.setAttrs(response);
            // w tym przypadku, event.target jest to referencja do widoku wiersza w widgecie
            // i w tym widoku aktualizujemy wartość własności model
            event.target.set('model', itemModel);
          }
        }
      });
 
      return this;
    }
  }, {
    ATTRS : {
      widgetItemModel : {
        valueFn : function () {
          return new Y.myApp.WidgetItemModel();
        }
      }
    }
  });
}, '1.0.0', {
  requires : ['io-base', 'widget-item-model', 'dashboard-view']
});

// dashboard-view.js
YUI.add('dashboard-view', function (Y) {
  'use strict';
 
  Y.namespace('myApp');
 
  Y.myApp.DashboardView = Y.Base.create('dashboardView', Y.View, [], {
    // funkcja renderująca widok panelu administracyjnego
    render : function () {
        // renderujemy widok panelu
        this.get('container').setHTML(this.template());
        // uruchamiamy renderowanie widgetu w panelu administracyjnym
        this._renderWidget();
 
        return this;
      },
    // funkcja renderująca widok widgetu jako część panelu administracyjnego
    _renderWidget : function () {
      var widget = this.get('widgetView');
 
        // BARDZO WAŻNE
        // widok panelu administracyjnego dodaje siebie jako obserwatora zdarzeń w widgecie
        // dzięki temu zdarzenia będą w stanie dotrzeć do serwisu z którym panel jest powiązany
        widget.addTarget(this);
 
        // wyświetlenie widgetu w panelu administracyjnym
        this.get('container').append(widget.render().get('container'));
 
        return this;
      }
    }, {
      ATTRS : {
        widgetView : {
          valueFn : function () {
            return new Y.myApp.WidgetView();
          }
        }
      }
    });
}, '1.0.0', {
  requires : ['widget-view', 'app-service']
});

// widget-view.js
YUI.add('widget-view', function (Y) {
  'use strict';
 
  Y.namespace('myApp');
 
  Y.myApp.WidgetView = Y.Base.create('widgetView', Y.View, [], {
    // funkcja wyświetlająca widok widgetu
    render : function () {
      // renderujemy pusty widok i go wyświetlamy
      this.get('container').empty().setHTML(this.template());
 
      // BARDZO WAŻNE
      // gdy widok będzie aktywny wtedy uruchamiamy zdarzenie get:widgetdata
      // jest to spowodowane tym, że widok musi zostać oznaczony jako aktywny
      // dzieje się to tak poprzez użycie metody addTarget() w widoku panelu administracyjnego
      this.after('activeChange', function () {
        this.fire('get:widgetdata', this);
      });
 
      // obserwujemy zdarzenie zmiany wartości własności widgetData
      // gdy wartość własności ulegnie zmianie, to uruchamiamy funkcję wyświetlającą
      // zawartość widgetu
      this.after('widgetDataChange', function () {
        this._renderWidgetContent();
      });
 
      return this;
    },
    // funkcja wyświetlająca zawartość widgetu
    _renderWidgetContent : function () {
      var that = this,
        // tworzymy pustą tabelę
        table = Y.Node.create('<table/>'),
        widgetData = this.get('widgetData');
 
      // dla każdego kawałka informacji mającego zostać wyświetlonym jako wiersz
      widgetData.rows.each(function (rowData) {
        // utwórz nową instancję widoku elementu widgetu
        var row = new Y.myApp.WidgetItemView();
 
        // BARDZO WAŻNE
        // widok widgetu dodaje siebie jako obserwatora zdarzeń w elemencie widgetu
        // dzięki temu zdarzenia będą w stanie dotrzeć do serwisu, który znajduje się
        // na samym szczycie powiązań
        row.addTarget(that);
        // zmień własność model, która przechowuje dane do wyświetlenia w elemencie widgetu
        row.set('model', rowData);
 
        // dodaj wiersz do tabeli
        table.append(row.render().get('container'));
      });
 
      // wyczyść widok z innych tabel
      this.get('container').all('table').remove();
      // wyświetl nową tabelę z zawartością
      this.get('container').append(table);
 
      return this;
    }
  }, {
    ATTRS : {
      widgetData : {
        valueFn : function () {
          return {};
        }
      }
    }
  });
}, '1.0.0', {
  requires : ['widget-item-view']
});

// widget-item-view.js
YUI.add('widget-item-view', function (Y) {
  'use strict';
 
  Y.namespace('myApp');
 
  Y.myApp.WidgetItemView = Y.Base.create('widgetItemView', Y.View, [], {
    initializer : function () {
      // obserwowanie zmian we własności widoku o nazwie model
      this.after('modelChange', function () {
        // uruchomienie zdarzenia get:widgetitemdata
        // które jest obserwowane przez serwis aplikacji
        this.fire('get:widgetitemdata', this.get('model').get('slug'));
      });
 
      // nasłuchiwanie zmian we własności widoku o nazwie itemData
      this.after('itemDataChange', function () {
        // renderowanie widoku elementu
        this._renderItem();
      });
    },
    _renderItem : function () {
      this.get('container').setHTML(this.template({
        name : this.get('itemData').name
      }));
 
      return this;
    }
  }, {
    ATTRS : {
      itemData : {
        valueFn : function () {
          return {};
        }
      }
    }
  });
}, '1.0.0', {
  requires : []
});