How can I have 1 route with different UIs?


Apologies for the poor question, but hopefully I can explain what I’m trying to do, and someone can instruct me on the proper way to accomplish my goals.

In my application I have a Widget that, essentially, has two states: in-progress, or fulfilled. This is tracked by an attribute on the model. Because of the two states editing a Widget has different UI treatments.

I would like one route: “edit-widget”, path: “/widgets/:widget_id” and have the resulting template load either the “in-progress-widget-editor” or the “fulfilled-widget-editor”, BUT keep the URL the same.

I was thinking the “editors” would be components. But I don’t know how to load them because I was thinking I could decided with “editor” to “load” in the afterModel() function in the edit-widget route, because I’d rather not have conditionals in my templates.

What is the best way to accomplish this?

Thanks, in advance, for any assistance.



The best way to accomplish this is definitely using conditionals in your templates. But there’s no reason that needs to be awkward. Make separate components for the two states, and call them from a conditional in the route template:

{{#if model.isInProgress}}
  {{in-progress-widget-editor model=model}}
  {{fulfilled-widget-editor model=model}}
1 Like


While I was hoping to avoid conditionals in my templates I guess I have to make the exception here, eh? :smiley:

Thank you for your quick reply.



Is there a specific reason you’re hoping to avoid them? They’re considered good practice in Ember-land. It’s possible to get carried away with a lot of helpers all used in the conditional, but simple ones are encouraged … :wink:



Personal preference is the reason. Generally speaking, I tend to avoid conditionals as much as possible, preferring to take a more OO approach with “tell, don’t ask” development. I now carry this with me as I further my Ember education.

I understand not all conditionals can be avoided. It’s just my usual approach.