Handling an action triggered by the same component used in multiple routes

Design
1

Hello,

What’s a scalable way to handle actions triggered by a component that’s used across multiple routes?

Let’s say there’s a component called tweet-block that’s displayed across multiple pages (in Twitter’s case, you can see it in your stream, or on a user’s profile page). This component has a retweet action that causes the creation of a new tweet.

According to DDAU, this action should be send as a signal outside the component. But what is the best place to handle it?

  1. If you handle it in the current route, then you have to duplicate the action in all routes that use this component.
  2. Another option is to handle the action in a route that’s a common parent to all routes that use this component. But what if that parent happens to be the ApplicationRoute? What if there are 20 actions like this one? Do you just put all of them in the ApplicationRoute?
  3. You could implement this action in a mixin that’s added to each route that uses the component. Would this be an elegant way to do it?
  4. Or you could ignore DDAU and just use the store to create a new tweet inside the component.

Any thoughts? I’m curious if there’s going to be a good solution available once routable components land in Ember.

Thank you!

2

A Mixin was the first thought to come to my mind. Very interested to hear other opinions on this as I’m dealing with a very similar problem atm.

3

My only problem with this approach is that you would have to create a mixin for each component that can appear in more than one route. Doesn’t feel very elegant.

4

You could create a service for those actions and inject them into components. I guess its very case specific. Either a service that handles the actions or a services that takes the action and invokes it in the right place.

And the name would be cool as well… ActionService :stuck_out_tongue:

5

Perhaps some sort of factory service?

6

Yes, of course it depends on the type of actions.

7

So how would it work for the example I gave with Twitter and the retweet action?

8

Hi @andreisoare! I just come across this thread. That’s an excellent question.

In my opinion, the rule of thumb is: if the data has nothing to do with the URL, it’s ok to use data-loading components.

I wrote an article a while back where I discussed communicating events upward, downward, sideways. DDAU is Ember’s new mantra but clearly does not apply to all cases.

There’s also an example (an activity feed) where it’s clear how using Services is the best approach in that case, and I think it’s similar to your Twitter component with the retweets.

And a relevant article: Should Components Load Data? - Ember Igniter

Hope that alleviates some of the confusion.