Hey folks,
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:
products/1/edit/channels
products/1/edit/colors
etc…
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.
{color-edit colors=model.colors}
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 channels and 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 Ember.inject.service.
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!