Ember component send action to route

by

For short answer you can you can use ember-route-action-helper addon.

<button {{action (route-action 'onButtonClick')}}>ClickToCallRouteAction</button>

There are three way of actions communication,

1. Old style classic functions style ie., passing function name as string from top to bottom. and in all the places we need to define same function and provide. Use sendAction to bubble. and send method bubble from controller to route hierarchy.

This is not encouraged.
Sample classic style actions twiddle

2. Closure actions
Use action helper pass function instead of just string. so that you don’t need to define it everywhere.
sample twiddle for closure actions style

3. route-action-helper addon
You can directly call route action from anywhere literally by just wrapping functions using route-action helper.

Sample twiddle

Comparision between Classic style and Closure style and Why Closure is preferrable ?

  • In classic style, You need to define actions at each level and use sendAction to trigger the action at each level until you got all the way out of your nesting.
  • You can return value in closure actions but not in classic actions.
  • You can curry values in closure actions but not in classic actions.
  • Closure actions fail immediately if the action is not found. but classic actions by design,would lazily raise errors only upon invocation
    values.
  • Coding complexity like who will handle actions and do business logic?.
  • In closure, you can combine action and mut helper to set a property with value. onclick=(action (mut title) value="titlevalue")
  • In closure, you can specify target object to invoke function. (action 'save' target=session) would look at the actions hash on the session object instead of the current context.

Some of the promising article regarding this,
– miguelcamba article ember-closure-actions-in-depth
– emberigniter article send-closure-actions-up-data-owner
– emberjs blog 1.13 release article
– dockyard – ember-best-practice-stop-bubbling-and-use-closure-actions
– blog from Ember map Why action helper?
– blog from Alisdair McDiarmid ember-closure-actions-have-return-values
– blog from alexdiliberto ember-closure-actions

More Related Contents:

  1. Ember-data embedded records current state?
  2. How to use multiple models with a single route in EmberJS / Ember Data?
  3. Using Ember.js, how do I run some JS after a view is rendered?
  4. Get current route name in Ember
  5. Handling errors with the (now default) Ember Data JSON-API adapter
  6. Hashbang URLs using Ember.js
  7. emberjs – how to mark active menu item using router infrastructure
  8. Ember pagination full example
  9. infinite scroll with ember.js (lazy loading)
  10. How can an observer find out the before and after values of the observed property in Ember.js?
  11. Client-side Javascript app – url routing with no hash tag
  12. Is it possible to load a Handlebars template via Ajax?
  13. What is the purpose of the Ember.Container
  14. How to fire an event to Ember from another framework
  15. Difference between Ember.get() and this.get()
  16. How to use third party npm packages with ember cli app
  17. Right way to do navigation with Ember
  18. Positional index in Ember.js collections iteration
  19. EmberJS: How to load multiple models on the same route?
  20. How can I execute array of promises in sequential order?
  21. SPA best practices for authentication and session management
  22. Token Authentication vs. Cookies
  23. How to make embedded hasMany relationships work with ember data
  24. Separate REST JSON API server and client? [closed]
  25. Ember transition & rendering complete event
  26. Recommended way to include bootstrap library in Ember.JS ember-cli App
  27. Ember without Ember Data
  28. Ember.js and RequireJS
  29. ember.js + handlebars: render vs outlet vs partial vs view vs control
  30. Rendering resolved promise value in Ember handlebars template

Leave a Comment