Rendering a separate template based on model property

1

I have a model with a status attribute that dictates a significant change in the view (i.e., almost everythign changes). Instead of having a single view template with all of the content wrapped in an IF/ELSE block, I would like to simply render a different template file. For me, and I suspect others, this is easier on the eyes. The following works. It will check the status on entering the route, and change the template if the status changes thereafter.

watchStatus: function() {
    let status = this.get('model.status'),
      tpl = (status === 3 || status === 4) ? 'investment/sold-view' : 'investment/index';

    this.set('templateName', tpl);
    this.render();
  }.observes('model.status')

I’m wondering if, for any reason, this might be considered bad practice, or create significant computational overhead?

Also, is there any way to check if the view has already been rendered? The last line of the function, where I call this.render(), might not be ideal when initially entering the route (but is necessary for re-rendering in the event that the status changes while in the route). I haven’t looked into it, but I worry that it might interfere with an error condition (transition to error route) or any other transition that may occur before render() is automagically called by Ember in the normal flow of route execution (e.g., I’m calling render too soon).

Thanks, Adam

2 Likes
2

You can use the component helper to dynamically render different components in your template.

3

Checkout Route#renderTemplate hook and Route#render method.

Any actions fired into Route can use render to render any template into any other template. Inside your template you can specify a named {{outlet}} that you can render into.