Is there a way to represent route closure actions instead of writing them all in the component shim?

Question

I'm using ember-route-action-helper

I have a component shim that looks like this:

{{component-name model=model 
action1=(route-action "action1") 
action2=(route-action "action2") 
action3=(route-action "action3") 
action4=(route-action "action4") 
action5=(route-action "action5") 
action6=(route-action "action6") 
action7=(route-action "action7") 
action8=(route-action "action8")
action9=(route-action "action9") 
action10=(route-action "action10")
action11=(route-action "action11")
action12=(route-action "action12") 
action13=(route-action "action13") 
action14=(route-action "action14")
}}

P.S. Above actions are not using the real action names

There are lots of actions that need to bubble to the route and I don't use controllers in my ember app.

This looks a bit clunky due to too many actions. Is there a way to represent this same information in another format or write it someplace else in my component .hbs file or .js file?

Answer 1

Your question is equivalent to asking, "why does this function look so clunky?":

function(model, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10, arg11, arg12, arg13, arg14) {
    ....
}

The answer is: you need to factor your code differently. It's never a good idea to have a function with 15 arguments, and the same goes for components for the exact same reason.

There are several ways to factor this code more clearly. Maybe some of these actions can go on dedicated services instead. Maybe some of them can be grouped into intermediate representations (like a model that has its own actions on it). Probably if you weren't adding an unnecessary template layer by creating a "shim" that doesn't do anything, you could directly pass each of these actions into the relevant child components, which would spread them out into logical places throughout the template.

Without seeing more of your specifics I can't tell what is the appropriate strategy here.

Answer 2

I think there is one shortcut, you can try directly call route-action from component without passing all the way down.

<button {{action (route-action 'appRouteAction') }}>My-Component button</button>

check this ember-twiddle I am not sure, is this right approach?

Answer 3

You only pass the action (function) UP to route for data manipulation purpose because it is the data owner.

Other non-data related actions should not pass to the route.

Possible solutions,

1. Put all application shared state (not data related) into a service and inject it into the component
2. Call model (the data passed into the component) method inside the component instead let the route do the work