aurelia
customElement as "templateController"
Custom elements should be able to be "template controllers". What I mean is the following:
Currently, to create a custom element that uses it's light DOM (child nodes) as a view/view factory, you have to jump through quite a few hoops. First, you need to add @processContent(false), then, you need to inject ViewResources, ViewSlot, ViewCompiler, Container, Element, and lastly, in the constructor you need to do this whole circus:
const fragment = document.createDocumentFragment();
let child;
while ((child = element.firstElementChild) !== null) {
fragment.appendChild(child);
}
this.viewFactory = viewCompiler.compile(fragment, viewResources);
this.container = container;
this.viewSlot = viewSlot;
If this was a templateController, I'd be able to simply inject a BoundViewFactory and the ViewSlot and call it a day. My point is, I don't really care about the view resources, the container being used, or even the element in question. I just need all those things to go through a bunch of formalities to get the same sort of functionality that you can get for free on custom attributes, and I have to do it for every custom element I create that wants this kind of functionality.
+1 for this.
Also today when applying @templateController to a custom element (naively or by confusion) the browser crash with a stack overflow (infinite recursion). This is very unfriendly for the dev and you can loose a lot of time if you don't realise/know what causes this loop...
This would help me a lot. I have lots of custom elements that want to add things to the binding context of their slots. I'm using own-context from #411 and it's having a lot of weird effects. And it's annoying.
Agreed. We really need this. :) This is borderline essential for a HOC pattern imo.
Consider
@processContent(MyCustomElement.processContent)
export class MyCustomElement {
doStuff() {
console.log('stuff did');
}
static processContent(a,b, element, d) {
let div = document.createElement('div');
div.setAttribute('click.delegate', 'doStuff()');
element.appendChild(div);
return true;
}
}
The only way to get the appended div to use logic from MyCustomElement is as @Alxandr described above.
- created() is too early, any changes to the binding context are overriden
- bind() is too late, all bindings are in effect
- beforeBind() is scoped wrongly, if the element injects a view engine resource, it will be in the scope of the element, not of the parent view model, which is where the override should take place.
@davismj How does that solve the problem? That is a solution to an extremely limited part of the overall issue, and doesn't even come close to addressing the issue of binding contexts.
@Alexander-Taran pointed this issue out to me just now, this is very similar to something I needed in vNext for certain WebGL renderer integrations. This issue makes my vague idea a lot more concrete. Will definitely happen in vNext.
