Best practices of emitting events bound for a view

We’ve been adding user notifications for asynchronous operation completes into our app lately. Mainly when the user clicks save/send/commit/etc, once we hear back from the server we pop up a little message informing the user it was successful. Here is an example, apparently “new users” can’t post images (seems useful?): http://i.imgur.com/lsY1ksu.png

Thus far, we’ve been using a few different “widgets” that will do the following:

App.ParticipantAddedNotification = Ember.View.extend({
  didInsertElement: function() {
    this.get('controller').on('participantAdded', this.show);
  },
  willDestroyElement: function() {
    this.get('controller').off('participantAdded', this.show);
  },
  show: function() {
    this.set('visible', true);
    Ember.run.later(this, function() {
      this.set('visible', false);
    }, 5000); 
  }
});

And of course our controllers then do the follow:

App.ManageParticipantsController = Ember.Controller.extend(Ember.Evented, {
  addParticipant: function() {
    var self = this;
    doAjax().then(function() {
      self.trigger('participantAdded');
  }
});

My question is, is this the right way to go about it? Any other alternatives?

A slightly different approach could be using a combination of a controller, template and the render helper:

App.NotificationController = Ember.Controller.extend({
  message: "",

  hasMessage: function() {
    return !!this.get('message')     
  }.property('message'),

  messageDidChange: function() {
    var self = this; 
    if(this.get('message')) {
      Ember.run.later(function(){self.set('message', null);}, 5000);   
    }
  }.observes('message')   
   
});


App.ManageParticipantsController = Ember.Controller.extend(

  needs: ['notifications'],   
     
  addParticipant: function() { 
    var self = this; 
    doAjax().then(function() { 
      self.get('controllers.notifications').set('message', 'Participant added');
    });
  }
});

Then in your notification.handlebars

<div {{bindAttr class="hasMessage">
  {{message}}     
</div>

and include all this using the render helper in your main application template or wherever makes sense:

{{render 'notification'}}

Hopefully that’s all syntactically correct. You could extend this so that messages is an array and could respond appropriately based on the array changing.

1 Like

Hey – How about that. I didn’t even think of that. Thanks for the suggestion @robmonie!

I’d love to hear what others think about these two (or if they have a third option)

Hey @workmanw

I’ve done something very similar to @robmonie, but as he indicated as a possibility, I wanted to be able to queue up my notifications (that may not necessarily all be the same). In my case, I included CSS animation on a notification element that lasted for 5 seconds so it would appear and disappear (and if another exists, immediately reappear). The template was bound to {{firstObject}}.

App.NotificationsController = Ember.ArrayController.extend({
  currentMessageDidChange : function() {
    if( this.get("firstObject") ) {

      Ember.run.later( this, function() {
        this.removeAt(0);
      }, 5000);

    }
  }.observes("firstObject")
});

App.ManageParticipantsController = Ember.Controller.extend({
  needs : ["notifications"],

  addParticipant : function() {
    var self = this;
    doAjax().then(function( message ) {
      self.get("controllers.notifications").pushObject( message );
    });
  }
});

@Spencer_Price Thanks for sharing!

I slept on it last night and I was able to convince myself that your (and @robmonie’s) approach was more MVC proper than my initial approach. I think I’ll pursue this route.