Passing block parameters to nested routes

1

Regularly I encounter situations where I’d like to pass a block parameter of a component to a nested route. But as far as I know there is no way the {{outlet}} helper allows this.

// parent-route.hbs
{{#some-component as |someProperty someAction|}}
  {{outlet}}
{{/some-component}}

// child-route.hbs
{{nested-component aProperty=someProperty anAction=someAction}}

So I feel like I have to choose between either component composition in a single route or some wacky interaction involving routes/services to enable route state. Being able to pass parameters to a nested route would make component composition much more flexible.

How do you feel about it?

2

You’re right that you can’t pass anything into {{outlet}}. It’s a pretty strong isolation barrier.

But you can share state from parent routes into their child routes – you just need to do it in the route and not the template. For example, a child route that doesn’t implement model() will automatically inherit its parent routes model. Or it can call this.modelFor(someAncestorRoute) or this.paramsFor(someAncestorRoute) and incorporate those values into its own model.

I could see an argument for eventually allowing data to cascade down into child routes in a controlled way from within templates.

1 Like
3

For passing application-level state around, the model hook is a good choice (although tricky when using ember-concurrency for skeleton loading). But the model hook shouldn’t be concerned with DOM-related state. And passing actions down is my biggest concern.

I might jump into this, trying to find out some way in the Ember source code. For the time being I guess I’ll have to keep struggling finding workarounds.

1 Like