Not all template content is supported in dynamic use-case
Current Behavior
Injecting some particular templates dynamically causes rendering issue for a ui-template.
This is a known issue with https://github.com/FlowFuse/node-red-dashboard/pull/1475, but the functionality introduced there improves the existing status-quo, so didn't think this issue would be a blocker.
Expected Behavior
Any injected template content should render the same as if it was rendered in the static configuration in the first place
Steps To Reproduce
See: https://github.com/FlowFuse/node-red-dashboard/pull/1475
Environment
- Dashboard version:
- Node-RED version:
- Node.js version:
- npm version:
- Platform/OS:
- Browser:
Have you provided an initial effort estimate for this issue?
I have provided an initial effort estimate
@joepavitt , If you find some time, could you please add some more details here about what is going wrong. It is not quite clear to me which problems you have. Thanks!
@bartbutenaers specifically referring to https://github.com/FlowFuse/node-red-dashboard/pull/1475#issuecomment-2518672835
What a pitty that I cannot reproduce the problem. Seems to be working fine here. If you have any idea how I could reproduce it, please let me know so I can at least help investigating the issue.
Just to clarify (as I thought your comment suggested that you did reproduce it) - even if you switched to the Hello World example, and then back to the counter example ,you could click the counter and it'd show "X Apples"?
@joepavitt , Ah ok, I think we have a misunderstanding. I thought that the template even didn't render for you, while it rendered for me fine. I wasn't aware that you couldn't click the button. So I was thinking out loud, in order to provide you some ideas that might help you to solve your issue.
But yes indeed after your last comment above, I can confirm that it renders fine but nothing happens when I click on the injected button. I will have a look, but no idea at the moment where to start searching.
Have spend all evening debugging, but no luck. Frameworks live Vue are a bit too much of magic to me personally.
Not sure if this Stackoverflow solution could be of any help here.
But they include the runtime compiler in their frontend.
Including a compiler is not wanted here, because it also works fine with the template from the config screen.
So not sure where I should put the .bind(this) and whether it will help solving this reactivity issue.
Using a template node before an ui-template and: msg.payload (With HTML text) ------> {{{msg.payload}}}
shows error in web explorer