Component fires `inserted` twice on append. #2288

Closed
taai opened this Issue Feb 23, 2016 · 1 comment

Comments

Projects
None yet
3 participants
@taai

taai commented Feb 23, 2016

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.

@daffl daffl added this to the 2.3.18 milestone Feb 23, 2016

@daffl daffl modified the milestones: 2.3.19, 2.3.18 Mar 3, 2016

@justinbmeyer

This comment has been minimized.

Show comment
Hide comment
@justinbmeyer

justinbmeyer Mar 4, 2016

Contributor

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/

Contributor

justinbmeyer commented Mar 4, 2016

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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment