Dynamic Templating using render and issues due to componentization?


#1

Problem Statement:

One component, say “x-comp” that will be used inside application.hbs. There is a “x-service” service that will set a “dynamicTemplate” property. “x-comp” will observe the x-service “dynamicTemplate” property. This should be required to “render” the “dynamicTemplate” that was passed. Another component “x-comp-2” will be residing inside each “dynamicTemplate” partial. The reason why “render” is required is to capture the events bubbled from “x-comp-2” rendered inside the template for other specific functionalities.

Code Sample:

<div class="x">
    {{render dynamicTemplate}}
</div>

But the above will not work as “render” helper will require a “quoted string”. And one of the preferred solutions to the same is to make it as components. Ideally as follows:

<div class="x">
    {{component dynamicTemplate}}
</div>

Doing this, we have limitations like:

  1. Cannot create a store record on the fly. If it was using render helper, the controller would create the store record and proceed with other functionalities.
  2. After a model is saved to backend, on the promise (inside x-comp-2) I would need the controller to transition to another route.
  3. This component which is rendered dynamically contains another component, so a simple “sendAction” would not bubble the action to its parent controller.
  4. Creating multiple components for single usage, looks like having too many components as well.

The reason being components are isolated and are not allowed to either create a store record or transition to different routes. With such isolated component scenarios, and that we are limited with render accepting only a static quoted string, how is this best achieved? Any use cases of this scenario with solutions would of great help.