Controlling and rendering flash-message with Ember (v 1.9.0) and ember-cli (v0.1.4)

README.md

Dependencies

• Ember 1.9.0 and ember-data 1.0.0-beta.12
• Bootstrap-sass 3.0.2
• jquery 1.11.1

All these packages can be installed via Bower. The code has been tested with ember-cli 0.1.4.

Usage

The flash message can be set from the controller by adding a needs dependency for the flashMessage controller. See the example below.

`import FlashDispatchable from '../mixins/flash-dispatchable'`

PostController = Ember.ObjectController.extend FlashDispatchable,
  
  actions:
    save:
      # do something
      @flashMessage('unable to save object', 'error').now()
      

`export default PostController`  

Then you can render the flash message putting the following code in the desired template

  <div>
      {{view 'shared/flash-message'}}
  </div>

Contrib

This gist is inspired by the ember-flash-message plugin of ryanto.

flash-dispatchable.coffee

# app/mixins/flash-message.coffe

`import Ember from 'ember'`

FlashDispatchable = Ember.Mixin.create

	needs: ['flashMessage']
	flashMessageController: Ember.computed.alias("controllers.flashMessage")

	flashMessage: (message, type) ->
		controller = @get('controllers.flashMessage')

		messageObject = Ember.Object.create({text: message})

		type or= 'notice' if typeof type is 'undefined'

		messageObject.set('type', type)
		controller.set('queuedMessage', messageObject)

		return controller

`export default FlashDispatchable`

flash-message-controller.coffee

# app/controllers/flash-message.coffe

`import Ember from 'ember'`

FlashMessageController = Ember.Controller.extend
	queuedMessage: null
	currentMessage: null

	now: ->
		@setProperties({queuedMessage: null, currentMessage: @get('queuedMessage')})

`export default FlashMessageController`

flash-message-route.coffee

# app/routes/flash-message.coffe

`import Ember from 'ember'`

FlashMessageRoute = Ember.Route.extend

	enter: ->
		@._super.apply(@, arguments)

		controller = @controllerFor('flashMessage')
		routeName = @get('routeName')

		target = @get('router.router.activeTransition.targetName')

		if (routeName isnt "loading" && routeName is target)
			controller.now()

`export default FlashMessageRoute`

flash-message.coffee

# app/views/shared/flash-message.coffe

`import Ember from 'ember'`

FlashMessage = Ember.View.extend

	tagName: 'div'
	templateName: 'shared/flash-message'
	classNames: ['animated']
	classNameBindings: ['type', 'notEmptyMessage:alert', 'notEmptyMessage:alert-dismissable']

	message: null

	emptyMessage: (->
		Ember.isEmpty(@get('message'))
	).property('message')
	notEmptyMessage: Ember.computed.not('emptyMessage')

	type: (->
		'alert-' + (@get('messageType') or 'info')
	).property('messageType')

	hideAndShowMessage: (->
		currentMessage = @get('controller.flashMessageController.currentMessage')
		currentMessageText = currentMessage.text
		currentMessageType = currentMessage.type
		console.log('%APP[view]<FlashMessage> currentFlashMessage changed', 'color: #24a61d')
		
		switch currentMessageType
			when 'success'
				messageType = 'success'
			when 'error'
				messageType = 'danger'
			when 'warning'
				messageType = 'warning'
			else
				messageType = 'info'

		@set('messageType', messageType)
		@set('message', currentMessageText)

		@show()

		Em.run.later( =>
			@hide()
		, 3000)	
	).observes('controller.flashMessageController.currentMessage')

	didInsertElement: ->
		console.log('%APP[view] init flashMessage', 'color: #ff5500')
		@get('controller')

	show: ->
		if @get('notEmptyMessage')
			@.$().show()
		else
			@.$().hide()

	hide: ->
		_this = this
		@.$().fadeOut 512, ->
			_this.set('message', null)

	actions:
		dismissFlashMessage: ->
			@hide()
			@get('controller.flashMessageController').set('currentMessage', null)

`export default FlashMessage`

flash-message.hbs

{{!-- app/templates/shared/flash-message.hbs  --}}

{{#if view.notEmptyMessage}}
	<button type="button" class="close dismiss" {{action 'dismissFlashMessage' target="view"}}>&times;</button>
	{{view.message}}
{{/if}}