I’m wondering what’s the most common solution to the following case:
I have a
products/1/edit route with some child routes that represent the attributes of the product you want to edit, f.e:
Finally, I want to make the properties of the edit child routes (channels Array, colors Array) available to the edit template, which is the parent.
This seems to be basic stuff, but I don’t know what’s a good solution.
Thanks in advance!
Maybe what you want to achieve is components to each model property, No need route at all.
I think it depends on the data model. It seems like in both cases you’re editing the same model (product:1). If that’s the case the model should be easily available on the
edit route as well as the
colors routes. You can use
this.modelFor('product.edit') to look up the current model for a route.
Alternatively, if this is state not available on the model you could use a service to house this data (e.g.
services/edit-product). We do this in our application sometimes for more complex situations that involve multiple screens / routes consuming the same piece of data. The common route ancestor, in this case
product.edit, can initialize the service on it’s
setupController hook. Similarly, that route can have a
saveProduct action. Any component or controller that needs to access this data can use
That later solution should probably be used a little more sparingly because it does create multiple dependencies and entanglement. But sometimes that’s what’s necessary.
I ended up defining the parent controller within my subroutes and accessing a property of this parent controller.
Yes, I also want to try this as a service when I’ve got time to refactor this.
I love sharing experiences in communities to avoid hours of frustration when facing such issues!