How can I have 1 route with different UIs?

Design
1

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.

2

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}}
{{else}}
  {{fulfilled-widget-editor model=model}}
{{/if}}
1 Like
3

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.

4

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:

5

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.

6

Hi, could you use component helper to avoid conditionals?

https://guides.emberjs.com/release/components/defining-a-component/

Thanks,

Darren

1 Like
7

Excellent question, DarrenD, and one I’m not able to answer, I think. My Ember knowledge, I feel, is still around the Novice level. I’m not sure another component would have helped my situation.

But thank you for the question.

8

Yep, you can use the component helper in your template to dynamically choose a component. This essentially pushes your conditional to JS and is not too big of a win.

Another thing you can do is set the templateName property in your Route dynamically (in the model hook, for example). Although this strategy works and is sometimes useful if your server response defines your UI, it does break some expectations for Ember developers who might be expecting a foo template with a foo route. I’m also not 100% sure that it’s the safest thing to do considering all the various ways a route can be transitioned to, and all the various ways that transitions can be aborted or retried.

Template conditionals are also a better path for the future in which you may be able to treeshake out conditions that may never be evaluate to true.

I fully agree that it’s easy to go overboard with template logic (especially with ember-truth-helpers).

1 Like
9

Well, it’s also important to me to write maintainable code. :slight_smile:

Thanks for your reply @mehulkar.