I have a notification view responsible for displaying global messages at the top of the page (info, warning, confirmation messages ...)

I created a NotificationView for the purpose, defined its content property and provided two handlers to show and hide the view. 

APP.NotificationView = Ember.View.extend({
    templateName: 'notification',
    classNames:['nNote'],
    content:null,

    didInsertElement : function(){                
    },

    click: function() {
        var _self = this;
        _self.$().fadeTo(200, 0.00, function(){ //fade
            _self.$().slideUp(200, function() { //slide up                    
                _self.$().remove(); //then remove from the DOM
            });
        });
       _self.destroy();
    },

    show: function() {
        var _self = this;
        _self.$().css('display','block').css('opacity', 0).slideDown('slow').animate(
            { opacity: 1 },
            { queue: false, duration: 'slow' }
        );          
    }
});

Ideally, i should be able to send an event from any controller or route to show the view with the proper content and styling. What would be the best way to architect this

I thought of using a named outlet in my application's template, however outlets are not quite suited for dynamic views. 

<div id="content">
    {{outlet notification}}
    {{outlet}}
</div>

I was also thinking of architecting the notification view to be a response to "The application" or "A Module" state.

ember.js
Edit
Report