Component with dynamic layout

1

I am trying to render a component with a dynamically compiled layout.

Here is an example that shows nicely what I am trying to accomplish:

Upon clicking the button, somevalue updates to “bar”, but not the whole layout gets updated.

On the third line in the rendered output it still says “foo hello” but I expected it to change to “bar hello” as the layout should be updated to this.get('somevalue') + ' hello {{some-component somevalue=somevalue}}'; as seen in the code for the dyn-layout component.

Is it possible this behaviour was different a while ago and now changed? I thought it has maybe to do with caching or something preventing the compiled layout from being updated/overwritten. Tried to figure out more but ended up going deeper down the rabbit hole than I intended to and also realized that I was in way over my head.

What am i doing wrong here? Ultimately I’d like a component where I can pass in a string that will serve as the layout of this component. That means this string can also contain handlebars code and sub-components (like for example a tooltip component to explain certain abbreviations in the string that was originally passed).

2

This is not supported in ember out of the box. It’s possible if you ship the template compiler in your app bundle, but it’s not the default.

It’s almost certainly not the best approach though - you’ll most likely be best off with a different design that doesn’t use inline compiled templates.

3

Thanks for the info. Still haven’t found a way to make this simple and straightforward enough. I’d like to be able to inject components into strings and then use those strings as a layout but i can’t really see any alternative approach. Might need a few pointers here. I could just inject HTML directly instead of components but that also feels a bit “meh”.

4

GitHub - ember-cli/ember-cli-htmlbars-inline-precompile: Precompile inline HTMLBars templates via ES6 tagged template strings might be what you’re after.

I made a little generator addon for it too, ember-inline-component - npm