Ember PubSub Service

components.message-listener.js

import Ember from 'ember';
import { BusListenerMixin } from 'demo-app/services/bus';


export default Ember.Component.extend(BusListenerMixin, {
  classNames: ['message-listener'],

  _setup: function() {
    this.set('messageLog', []);
  }.on('didInitAttrs'),
  
  receivedSubMessage: function(name, message) {
    this.get('messageLog').pushObject({
      name: name,
      message: JSON.stringify(message)
    });
  },
  
  messageTypes: Ember.computed('messageSubs.[]', function() {
    var subs = (this.get('messageSubs') || []);
    return '[' + subs.join(',') + ']';
  })
});

components.message-pub-button.js

import Ember from 'ember';
import { BusPublisherMixin } from 'demo-app/services/bus';


export default Ember.Component.extend(BusPublisherMixin, {
  classNames: ['message-pub-button'],
  name: '',
  from: '',
  
  actions: {
    doPublish: function() {
      this.publishMessage(this.get('name'), {
        'from': this.get('from')
      });
    }
  }
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  setupController: function(controller) {
    controller.set('subsOne', ['tomdale', 'wycats']);
    controller.set('subsTwo', ['wycats', 'mixonic']);
  }
});

services.bus.js

import Ember from 'ember';


export var BusListenerMixin = Ember.Mixin.create({
  bus: Ember.inject.service(),
  messageSubs: null,
  
  init: function() {
    this._super();
    this.get('bus').on('pubMessage', this, this.receivedMessage);
  },
  
  destroy: function() {
    this.get('bus').off('pubMessage', this, this.receivedMessage);
    this._super();
  },
    
  receivedMessage: function(name, message) {
    var messageSubs = this.get('messageSubs'); 
    if(messageSubs && messageSubs.contains(name)) {
      this.receivedSubMessage(name, message);
    } 
  },
  
  receivedSubMessage: function(name, message) {
    // Primary hook.
  }
});


export var BusPublisherMixin = Ember.Mixin.create({
  bus: Ember.inject.service(),
  publishMessage: function(name, message) {
    this.get('bus').publish(name, message);
  }
});


var BusService = Ember.Service.extend(Ember.Evented, {
  setupService: function() {
    /* Sometimes these require setup */
  },
  
  publish: function(name, message) {
    this.trigger('pubMessage', name, message);
  }
});

export default BusService;

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.message-pub-button {
  display: inline-block;
}

.message-listener {
  padding: 5px 8px;
  color: #0A1d26;
  background-color: #E6EEF2;
  margin: 15px 0;
}

.message-listener .message-block {
  margin-left: 5px;  
}

.message-listener .message-block pre {
  display: inline-block;
  margin: 0;
  background-color: #CED5D9;
  font-style: italic;
}

templates.application.hbs

<h1>Welcome to PubSub Example</h1>

Send Messages: <br>
{{message-pub-button name="tomdale" from="Paris"}}
{{message-pub-button name="wycats" from="Barcelona"}}
{{message-pub-button name="mixonic" from="Munich"}}

{{message-listener messageSubs=subsOne}}
{{message-listener messageSubs=subsTwo}}

templates.components.message-listener.hbs

Listening for "{{messageTypes}}":

<br>

{{#each messageLog as |entry|}}
  <div class="message-block">
    {{entry.name}}
    <pre>{{entry.message}}</pre>
  </div>
{{/each}}

templates.components.message-pub-button.hbs

<button {{action "doPublish"}}>{{name}}</button>

twiddle.json

{
  "version": "0.4.8",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.8/ember.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.9/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.8/ember-template-compiler.js"
  }
}