make $inserted work

[mickmcgrath13]

Right now, $inserted doesn't seem to fire when its RHS is being can-imported. Perhaps it fires but the thing being can-imported hasn't resolved, yet?

In this example, *animations.customFadeIn doesn't run

<can-import 
    from="can-stache-animate/demos/inserted-animations" 
    {^value.animations}="*animations" 
/>
<div class="demo"  ($inserted)="*animations.customFadeIn" />

...but in the following example, handleInserted does run (it's on the viewModel). See the inserted demo

<div class="demo demo-2"   ($inserted)="handleInserted" />

[mickmcgrath13]

So, this works:

<can-import from="can-stache-animate/demos/inserted-animations" 
 {^value.animations}="*animations" />
{{#*animations}}
<div class="demo-wrap">
        <div class="demo"
          ($inserted)="*animations.customFadeIn" />
        </div>
{{/*animations}}

..but it would be really nice if we didn't have to wrap it like that

[mickmcgrath13]

Probably the best way around this would be to either do the above ({{#*animations}}) or register helpers for the animations that you want to use for inserted:

import canStacheAnimate from 'can-stache-animate';
import stache from 'can-stache';

export default Component.extend({
  ...
  helpers:{
    fadeIn: canStacheAnimate.animations.fadeIn
  }
});

Possible Future Alternative: Register all animations as stache helpers