diff --git a/README.md b/README.md
index 45d1ac5..5a057cf 100644
--- a/README.md
+++ b/README.md
@@ -103,6 +103,52 @@ App.PostController = Ember.ObjectController.extend({
Please note that whenever you set the flash message from a control it
will be displayed instantly.
+### Using flash templates instead of text messages
+
+In case you believe flash is a "view" thing, or if you need to use
+different markup through your messages (custom actions, images...),
+you can define your flash messages in templates, and render them
+using a specific controller.
+
+Example from a route:
+
+```javascript
+Ember.ProfileRoute = Ember.Route.extend({
+ setupController: function(controller, profile) {
+ if(profile.isEmpty()) {
+ this.flash({
+ templateName: 'emptyProfileNotice',
+ controller: controller,
+ });
+ }
+ this._super(controller, profile);
+ },
+});
+```
+
+Example from a controller:
+
+```javascript
+App.PostController = Ember.ObjectController.extend({
+ needs: ['flashMessage'],
+
+ actions: {
+ save: function() {
+ var flashMessage = this.get('controllers.flashMessage');
+ var controller = this;
+
+ this.get('model').save()
+ .then(function() {
+ flashMessage.set('message', Ember.Object.create({
+ templateName: 'savedPostNotice',
+ controller: controller,
+ });
+ });
+ }
+ }
+});
+```
+
## Development
This plugin is built with rake pipeline, which requires Ruby. To get
diff --git a/lib/helper.js b/lib/helper.js
index ea74743..f805955 100644
--- a/lib/helper.js
+++ b/lib/helper.js
@@ -9,9 +9,20 @@ Ember.Handlebars.registerHelper('flashMessage', function(options) {
view;
if (currentMessage) {
- view = Ember.View.create({
- template: template
- });
+ if (currentMessage.get && currentMessage.get('templateName')) {
+ var customTemplateName = currentMessage.get('templateName'),
+ customTemplateController = currentMessage.get('controller');
+
+ view = Ember.View.create({
+ templateName: customTemplateName,
+ controller: customTemplateController,
+ });
+ }
+ else {
+ view = Ember.View.create({
+ template: template
+ });
+ }
}
this.set('currentView', view);
diff --git a/lib/route_mixin.js b/lib/route_mixin.js
index 26e7751..40f5a3a 100644
--- a/lib/route_mixin.js
+++ b/lib/route_mixin.js
@@ -13,5 +13,18 @@ Ember.FlashMessageRouteMixin = Ember.Mixin.create({
controller.set('queuedMessage', messageObject);
return controller;
- }
+ },
+
+ flash: function(options) {
+ var controller = this.controllerFor('flashMessage');
+
+ var messageObject = Ember.Object.create({
+ templateName: options.templateName,
+ controller: options.controller
+ });
+
+ controller.set('queuedMessage', messageObject);
+
+ return controller;
+ },
});
diff --git a/tests/integration/flash_message_test.js b/tests/integration/flash_message_test.js
index 853efed..0b8d3ab 100644
--- a/tests/integration/flash_message_test.js
+++ b/tests/integration/flash_message_test.js
@@ -25,17 +25,39 @@ App.PromiseRoute = Ember.Route.extend({
App.LoadingRoute = Ember.Route.extend();
App.FromControllerController = Ember.Controller.extend({
- needs: 'flashMessage'.w(),
+ needs: 'flashMessage customFlashTemplate'.w(),
actions: {
showMessage: function() {
var flashMessage = this.get('controllers.flashMessage');
flashMessage.set('message', 'testing');
- }
+ },
+
+ showCustomTemplate: function() {
+ var flashMessage = this.get('controllers.flashMessage');
+ flashMessage.set('message', Ember.Object.create({
+ templateName: 'customFlashTemplate',
+ controller: this.get('controllers.customFlashTemplate'),
+ }));
+ },
}
});
+App.CustomFlashTemplateController = Ember.Controller.extend({
+ model: null,
+ customActionCalled: false,
+
+ actions: {
+ customAction: function() {
+ this.set('customActionCalled', true);
+ },
+ },
+});
+
+
Ember.TEMPLATES.application = Ember.Handlebars.compile('{{#flashMessage}}{{message.text}}{{/flashMessage}}');
+Ember.TEMPLATES.customFlashTemplate = Ember.Handlebars.compile('Blah');
+
var findMessage = function() {
return $('#qunit-fixture .message');
@@ -211,3 +233,47 @@ test("should be able to use the flash messenger from a controller", function() {
assertMessage();
});
});
+
+test("should be able to render a custom flash template from a route", function() {
+ visit("/");
+
+ andThen(function() {
+ var customFlashTemplateController = App.__container__.lookup('controller:customFlashTemplate');
+
+ customFlashTemplateController.set('model', {name: 'Foo'});
+
+ router().flash({
+ templateName: 'customFlashTemplate',
+ controller: customFlashTemplateController,
+ });
+ });
+
+ visit("/posts/new");
+
+ andThen(function() {
+ assertMessage();
+ ok(hasClass('custom'));
+ });
+});
+
+test("should be able to render a custom flash template from a controller", function() {
+ visit("/");
+
+ andThen(function() {
+ App.__container__.lookup('controller:fromController')
+ .send('showCustomTemplate');
+ });
+
+ andThen(function() {
+ assertMessage();
+ ok(hasClass('custom'));
+ });
+
+ click("#custom-flash-template-action");
+
+ andThen(function() {
+ var customFlashTemplateController = App.__container__.lookup('controller:customFlashTemplate');
+ ok(customFlashTemplateController.get('customActionCalled'));
+ });
+});
+