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:
- 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.
- After a model is saved to backend, on the promise (inside x-comp-2) I would need the controller to transition to another route.
- This component which is rendered dynamically contains another component, so a simple "sendAction" would not bubble the action to its parent controller.
- 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.
Aucun commentaire:
Enregistrer un commentaire