在Ember中解决模型后，从路线触发对控制器的操作

Question

I am fairly new to Ember, being a hardcore backbone aficionado for many years and I'm at a loss for how to handle a situation I've run into.

I am using Pusher and the Pusher Ember library to build a sort of chat application.

The way it works is, a person navigates to a users account page and it creates a new "conversation". Then, once that conversation has been created, I would like to subscribe to a pusher channel that is dynamically named after that conversations id. I need to define the Pusher Subscriptions on my controller.

Here's my route (in coffeescript)

App.ConversationShowRoute = Ember.Route.extend
  model: (params) ->
    @store.createRecord('conversation', user_id: params.user_id).save()

and my controller:

App.ConversationShowController = Ember.ObjectController.extend
  init: ->
    subscriptions = []
    subscriptions[@model.get('id')] = ['newMessage']
    PUSHER_SUBSCRIPTIONS: subscriptions

Unfortunately, the model has not resolved at this point so I don't yet know what my @model.id is, and it fails.

Any advice for the best way to handle this?

Answer 1

I had the same issue when I added ember-pusher to my application. The solution I went with is to define a variable in the App namespace that could be referenced. (Not ideal and something I'll need to fix later)

init: function () {
  this.channelName = 'presence-document-' + App.documentId + '-channel';
  this.PUSHER_SUBSCRIPTIONS[ this.channelName ] = [
    'pusher:subscription_succeeded', 'pusher:member_added', 'pusher:member_removed',
    'client-send-status', 'client-send-message'
  ];
  this._super();
}

A second, cleaner option, would be to try a needs relationship with your user controller, but I'm not sure if that will be available until after init is complete.

App.ConversationShowController = Ember.ObjectController.extend({
  needs: ['user'],
  userId: Ember.computed.alias('controllers.user.id'),

  init: function() {
    this.PUSHER_SUBSCRIPTIONS[this.get('userId')] = ['newMessage'];
    this._super(); // Maybe try putting this first if properties haven't resolved.
  }
});

A third option would be to lookup the user controller (singleton) during init.

App.ConversationShowController = Ember.ObjectController.extend({
  init: function() {
    var userController = this.container.lookup('controller:user');
    this.PUSHER_SUBSCRIPTIONS[userController.get('id')] = ['newMessage'];
    this._super();
  }
});

UPDATE

Since you need the conversation id you can observe when the model changes and wire up pusher the way ember-pusher/bindings.js does. You would no longer need to override controller.init, just set PUSHER_SUBSCRIPTIONS: {} to start with.

afterModelLoad: function() {
    this.channelName = 'conversation-' + this.get('model.id');
    this.PUSHER_SUBSCRIPTIONS[this.channelName] = ['newMessage'];

    // From bindings.js init
    var events = this.PUSHER_SUBSCRIPTIONS[this.channelName];
    this.pusher.wire(this, this.channelName, events);

    this.removeObserver('afterModelLoad'); /* If you only want to run once */
}.observes('model')