Binding the insert/show event for DOM element

CanJS
1

Hi,
In the previous version (CanV2), this was possible to use the ($inserted) = "inserted(%element)" syntax to catch the event when a new DOM element is inserted/showed in the DOM and it was very useful for situation where it’s necessary to initialize an external plug-in (for instance a jquery datepicker) when the element is showed.
Here is an example where the element to be inserted is showed in a list:
{{#each(itemList)}} <input class="form-control" type="text" placeholder="expire" value:bind="../itemList[scope.index].expire" on:inserted="scope.root.initPlugin(scope.element)" id="datepicker" /> ... {{/each}}


but this will not work.

2

Hi @fp_dev, I think the syntax you have is correct, but it’s not working in JS Bin due to https://github.com/canjs/can-dom-mutate/issues/30

In CanJS 4, we stopped including the special inserted/removed events by default. They’re pretty easy to add back: either install the can-3-4-compat package and import can-3-4-compat/dom-mutation-events in your app, or include the following code in your app:

EDIT: I had originally suggested doing the same thing as can-3-4-compat/dom-mutation-events.js in your project; it uses an undocumented module, so I’d just use the can-3-4-compat package instead (which is easier anyway).

This is covered in the “inserted/removed event” section of the CanJS 4 migration guide.

3

Thank you @chasen.
Including the compat-module now it works properly both when importing components (i.e. with can-import ) and also when adding new html elements in the page!!!

Will this feature be removed in the future from CanV4?

4

I realize the name of the can-3-4-compat package makes it sound like it’s something that won’t be around in CanJS 5… maybe we’ll break that off into its own module, I’m not sure. But those events and being able to mix them in isn’t something we’ll remove; I think it’s a common need in apps, we just didn’t want to ship it in core if people didn’t need it in their app.