Hello,
In JET 4.0.0 I have an oj-input-text that is rendered inside of a div.
<div id="dynContainer">
\<oj-label>Value:\</oj-label>
\<oj-input-text value="{{inputValue}}" id="dynInput">\</oj-input-text>
</div>
Now, say I want to make it so that the element is programmatically added to the DOM instead of coded into the HTML file at design time. I found this Stackoverflow answer about programmatically adding elements based on HTML strings that I thought may be relevant since JET components are HTML custom elements now in JET 4+. However, when I tried implementing it, the oj-input-text is not rendering.
<div id="dynContainer">
\<oj-label>Value:\</oj-label>
</div>
self.inputValue = ko.observable('test');
$(document).ready(function () {
var template = document.createElement('template');
template.innerHTML = '\<oj-input-text value="{{inputValue}}" id="dynInput">\</oj-input-text>';
$('#dynContainer').append(template.content.firstChild);
});
The generated HTML does show that an oj-input-text tag was added to the DOM:
But it looks like whatever rendering process actually builds out the contents of the oj-* components is not getting run. So I guess the question is this: is dynamically adding JET components like this even possible currently and if so, what am I doing wrong?