Move alerts to their own controller

ember/app/controllers/alerts.js

@@ -0,0 +1,17 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+	alerts: [],
+
+	actions: {
+		alert: function(message) {
+			this.get('alerts').pushObject(message);
+		},
+		dismissAlert: function(message) {
+			this.get('alerts').removeObject(message);
+		},
+		clearAlerts: function() {
+			this.get('alerts').clear();
+		}
+	}
+});

ember/app/controllers/application.js

@@ -15,20 +15,9 @@ export default Ember.Controller.extend({
 	searchQuery: '',
 	searchActive: false,
 
-	alerts: [],
-
 	actions: {
 		search: function(query) {
 			this.transitionToRoute('index', {queryParams: {searchQuery: query, sort: query ? 'relevance' : 'recent'}});
-		},
-		alert: function(message) {
-			this.get('alerts').pushObject(message);
-		},
-		dismissAlert: function(message) {
-			this.get('alerts').removeObject(message);
-		},
-		clearAlerts: function() {
-			this.get('alerts').clear();
 		}
 	}
 });

ember/app/controllers/discussion.js

@@ -4,8 +4,8 @@ import ComposerReply from '../components/discussions/composer-reply';
 import ActionButton from '../components/ui/controls/action-button';
 import AlertMessage from '../components/alert-message';
 
-export default Ember.ObjectController.extend(Ember.Evented, {
+export default Ember.Controller.extend(Ember.Evented, {
-    needs: ['application', 'composer'],
+    needs: ['application', 'alerts', 'composer'],
     
     queryParams: ['start'],
     start: '1',
@@ -25,7 +25,7 @@ export default Ember.ObjectController.extend(Ember.Evented, {
         var stream = this.get('stream');
 
         composer.set('content.loading', true);
-        controller.get('controllers.application').send('clearAlerts');
+        controller.get('controllers.alerts').send('clearAlerts');
 
         var post = this.store.createRecord('post', {
             content: data.content,
@@ -59,7 +59,7 @@ export default Ember.ObjectController.extend(Ember.Evented, {
                     message: 'Your reply was posted.'
                 });
                 message.on('populateControls', function(controls) {
-                    controls.pushObjectWithTag(ActionButton.extend({
+                    controls.pushObjectWithTag(ActionButton.create({
                         label: 'View',
                         action: function() {
                             controller.transitionToRoute('discussion', post.get('discussion'), {queryParams: {start: post.get('number')}});
@@ -67,7 +67,7 @@ export default Ember.ObjectController.extend(Ember.Evented, {
                         }
                     }), 'view');
                 });
-                controller.get('controllers.application').send('alert', message);
+                controller.get('controllers.alerts').send('alert', message);
             }
         },
         function(reason) {
@@ -77,7 +77,7 @@ export default Ember.ObjectController.extend(Ember.Evented, {
                     type: 'warning',
                     message: reason.errors[i]
                 });
-                controller.get('controllers.application').send('alert', message);
+                controller.get('controllers.alerts').send('alert', message);
             }
         })
         .finally(function() {
@@ -93,7 +93,7 @@ export default Ember.ObjectController.extend(Ember.Evented, {
 
             // If the composer is already set up for this discussion, then we
             // don't need to change its content - we can just show it.
-            if (!(composer.get('content') instanceof ComposerReply) || composer.get('content.discussion') != discussion) {
+            if (!(composer.get('content') instanceof ComposerReply) || composer.get('content.discussion') !== discussion) {
                 composer.switchContent(ComposerReply.create({
                     user: controller.get('session.user'),
                     discussion: discussion,

ember/app/controllers/index.js

@@ -7,7 +7,7 @@ import ComposerDiscussion from '../components/discussions/composer-discussion';
 import AlertMessage from '../components/alert-message';
 
 export default Ember.Controller.extend(Ember.Evented, PaneableMixin, {
-	needs: ['application', 'composer', 'index/index', 'discussion'],
+	needs: ['application', 'composer', 'alerts', 'index/index', 'discussion'],
 
 	index: Ember.computed.alias('controllers.index/index'),
 
@@ -19,7 +19,7 @@ export default Ember.Controller.extend(Ember.Evented, PaneableMixin, {
         var stream = this.get('stream');
 
         composer.set('content.loading', true);
-        controller.get('controllers.application').send('clearAlerts');
+        controller.get('controllers.alerts').send('clearAlerts');
 
         var discussion = this.store.createRecord('discussion', {
             title: data.title,
@@ -38,7 +38,7 @@ export default Ember.Controller.extend(Ember.Evented, PaneableMixin, {
                     type: 'warning',
                     message: reason.errors[i]
                 });
-                controller.get('controllers.application').send('alert', message);
+                controller.get('controllers.alerts').send('alert', message);
             }
         })
         .finally(function() {

ember/app/initializers/inject-components.js

@@ -0,0 +1,7 @@
+export default {
+  name: 'inject-components',
+  initialize: function(container, application) {
+    application.inject('component', 'alerts', 'controller:alerts')
+    application.inject('component', 'composer', 'controller:composer')
+  }
+};

ember/app/templates/alerts.hbs

@@ -0,0 +1,7 @@
+<div class="alerts">
+	{{#each alert in alerts}}
+		<div class="alert-wrapper">
+			{{view alert dismiss="dismissAlert"}}
+		</div>
+	{{/each}}
+</div>

ember/app/templates/application.hbs

@@ -47,12 +47,8 @@
 
 </div>
 
+<div id="modal" class="modal fade">
 	{{outlet "modal"}}
+</div>
 
-<div class="alerts">
+{{render "alerts"}}
-	{{#each alert in alerts}}
-		<div class="alert-wrapper">
-			{{view alert dismiss="dismissAlert"}}
-		</div>
-	{{/each}}
-</div>

ember/app/templates/discussion.hbs

@@ -1,6 +1,6 @@
 <header class="hero discussion-hero">
 	<div class="container">
-		<h2>{{title}}</h2>
+		<h2>{{model.title}}</h2>
 	</div>
 </header>
 
@@ -13,6 +13,5 @@
 		viewName="streamContent"
 		stream=stream
 		class="discussion-posts posts"
-		component="discussions/post-wrapper"
 		updateStart="updateStart"}}
 </div>