Component fires inserted twice on append.

[taai]

This is probably a duplicate of previously fixed issues like in #1564 , but this is still a problem.

When using components, I want to initialize an instance of component by appending HTML element to the DOM. So, I'm using $('#parent').append(template) instead of $('#parent').html(template). When using .append(), the inserted event of the component gets fired twice. When using .html(), it gets fired once as it should. I don't want to create a separate container just to use .html() for each component instance.

So, my workaround is this:

$('#parent').append(
    $(document.createDocumentFragment()).html(can.stache('<my-component></my-component>'))
);

Because .html() works - see that in #1576

I made a JSFiddle with a problem:
http://jsfiddle.net/kmqys2fw/3/

By the way, in the example I'm using jQuery 2.1.4. I noticed that when using jQuery 2.2.x the inserted trigger does not get triggered at all when using .append(), and my workaround does not work at all.

[justinbmeyer]

This doesn't seem like a bug. can.stache returns a function, you need to call it like:

can.stache('<my-component></my-component>')()

Example:

http://jsfiddle.net/kmqys2fw/4/