Framework: attached() not called on custom element inside enhanced area

[deap82]

I'm submitting a bug report

• Library Version:
  Current, as it is reproduced in gist/gistrun (link below).

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  6.9.1

• NPM Version:
  3.10.8

• JSPM Version
  JSPM 0.16.48

• Browser:
  Chrome, but I would suppose all.

• Language:
  TypeScript

Current behavior:
A custom element that is set up inside an element that is enhanced through TemplatingEngine.enhance does not get its attached function called.

Expected/desired behavior:
Demo of bug: https://gist.run/?id=3f84693a20dc3d708da0850f69257212&sha=bf8f8346bf62e3c805b312b4cac0617aeb737993

I also have the bug in an application with the jspm setup, and tonight I've also reproduced it in a small test application using the Aurelia CLI.

The demo above also includes a (nasty) workaround I came up with :-/.

• What is the expected behavior?
  The attached function of the custom element should be called, even when invoked through TemplatingEngine.enhance.

• What is the motivation / use case for changing the behavior?
  See expected behavior.

[stoffeastrom]

let templatingEngine = aurelia.container.get(TemplatingEngine);
    templatingEngine.enhance({
      container: aurelia.container,
      element: document.querySelector('#enhanced'),
      resources: aurelia.resources
    }).attached();

The enhance is returning the view so just call attached

[stoffeastrom]

Look at the framework implementation

[EisenbergEffect]

We should probably do this....
The above from @stoffeastrom is recommended for now.

[stoffeastrom]

@EisenbergEffect Agree, also we might have guidelines on how to properly tear down the enhancment

[fabioluz]

The description of the enhance() method says:

Consumers of this are responsible for enforcing the View lifecycle.

So, I think that is the expected behavior.

[AshleyGrant]

@fabioluz expected vs desired behavior would be the thing here.

[PWKad]

Just ran across this as well definitely need to get this in place, attached is also not called for any components that the enhanced element renders. @EisenbergEffect if you want to assign this to me I can take a look at the fix.

[EisenbergEffect]

I can actually fix this and release it this weekend. I found another bug in enhance that I can handle at the same time as this.

[EisenbergEffect]

The implementation in the next release will now call attached automatically. This shouldn't break any old code that was manually calling it since the attached implementation guards against it executing any code if it's already attached.

[jridenbaugh]

@EisenbergEffect I believe this fix actually breaks one of my use cases. I'm calling enhance on an element that isn't attached to the DOM yet, but it gets attached later. The part that breaks is that I'm using material design lite (aurelia-mdl-plugin), which I believe ties into the attached() lifecycle method and tries to find elements using document.querySelector. Is there a way for me to manually control the attached call?

[EisenbergEffect]

Interesting. The enhance api was never intended to be used on nodes that are outside of the DOM. Instead, you should use the ViewCompiler directly to compile a ViewFactory and create your View instance.