Fix:Can't bind future values outside of HTML tags #58
Conversation
|
|
| //acc = existingRef?accPlusString:acc +string.replace(/\s*>/, ` ${RESOLVE_ATTRIBUTE}="${ref}">`) +ref; | ||
| acc += (existingRef?string:string.replace(/\s*>(?=[^<]*$)/, ` ${RESOLVE_ATTRIBUTE}="${ref}">`)) +INTERACTIVE_NODE_START +(initialValue ?? '') +INTERACTIVE_NODE_END; | ||
|
|
||
| acc += string + `<!--RML-INTERACTIVE-NODE ${ref}-->` + (initialValue ?? '') + '<!--/RML-INTERACTIVE-NODE-->'; |
There was a problem hiding this comment.
This is just an extra HTML comment you're injecting into the output HTML, that's not going to fix the issue.
You need to keep the INTERACTIVE_NODE_START and INTERACTIVE_NODE_END markers as they mark sinks within plain-text sections.
The data binder will look for these and if it finds one, it will create a "text node" in the DOM where sinks can drop their content.
const stream = from('hello', 'world');
target.innerHTML = rml`
this is a plain-text string, no HTML tags, but we want our stream to be sinked here: -> ${stream} -<
`;the INTERACTIVE_NODE_START and INTERACTIVE_NODE_END markers will wrap the ${stream} part in the parser and the binder will unwrap it when the component is mounted.
Does that help giving an idea of what's happening and where do we need the change to be made?
We'll need a couple of unit tests, as well, to prove it works.
2 participants
I have fixed the issue on Can't bind future values outside of HTML tags , Please do review the changes and let me know if any changes required