Document Fragment to Stache Template

CanJS
1

Is there a simple way to take a document fragment and create a stache template that we can insert into the document?

2

What do you mean? Stache templates return document fragments.

3

Let’s say I’ve created a document fragment using JavaScript. Said fragment contains custom elements which will be handled by a can.Component. Now I want to insert said fragment into the DOM. I was trying this late last night and most likely overlooked the simple solution…

4

Components only work if their elements are created by a template. The fragment needs to be created by stache.

var frag = can.stache(" .... <custom-element> .... </custom-element> ....");
$("body").append(frag);

You can not (easily) programmatically create a fragment and have custom element behavior. Something like:

var frag = document.createDocumentFragment();
var custom = document.createElement('custom-element');
frag.appendChild(custom);
$("body").append(frag);

does not work.

5

That is what I feared. Ugh. Ok, I will re-think my plan of attack. Was more of a proof on concept anyhow. Thanks for the confirmation.

Hope all is well. I’ve been MIA for a while, but should be back in the fray…

6

You can initialize a Component manually. You just need to pass it the element and tagData:

new CustomElement(el, {.. tagData...})