typescript - Aurelia - Hvordan få instans av et dynamisk opprettet Custom Element i en View/ViewSlot
Så jeg fant ut hvordan man bygger og oppretter et Aurelia Custom Element dynamisk via en View/View Slot med koden vist nedenfor, men jeg vet ikke hvordan man får tak i instansen (vel, jeg fant en måte, men den er stygg)
Her er tjenesten jeg har for å dynamisk opprette et tilpasset element
export class AureliaUtilService {
constructor(
private container: Container,
private viewCompiler: ViewCompiler,
private viewResources: ViewResources,
) { }
createAureliaViewModelAddToSlot(templateUrl: string, bindableData: any, targetElement?: HTMLElement | Element, clearTargetContent = false): AureliaViewOutput | null {
const viewFactory = this.viewCompiler.compile('<template><compose view-model.bind="template"></compose></template>', this.viewResources);
if (targetElement) {
if (clearTargetContent && targetElement.innerHTML) {
targetElement.innerHTML = '';
}
// Creates a view
const view = viewFactory.create(this.container);
const bindings: any = { template: (templateUrl || ''), ...bindableData };
view.bind(bindings, createOverrideContext(bindings));
// Add the view to the slot
const viewSlot = new ViewSlot(targetElement, true);
if (viewSlot && viewSlot.add) {
viewSlot.add(view);
}
return { view, viewSlot };
}
return null;
}
}
da kaller jeg det på denne måten, og mitt tilpassede element vises på skjermen, hurra
const targetElm = document.querySelector('.container');
const templateUrl = PLATFORM.moduleName('custom-element');
const bindings = { collection: this.collection };
const dynamicElement = this.aureliaUtilService.createAureliaViewModelAddToSlot(templateUrl, bindings, targetElm, true);
men nå vil og trenger jeg å endre noen egenskaper til det tilpassede elementet, hvordan kan jeg få tak i dets instans? Ved å logge objektet i konsollen, fant jeg indirekte instansen ved å gå dypt ned (virkelig dypt, altså), men det er stygt, så det må finnes en bedre måte!?
Her er den dype, stygge måten jeg fant forekomsten på
// first I somehow need to wait the dynamically created Custom Element to fully rendered
// for that I found that I can wrap it in a setTimeout for a full lifecycle to pass
const instance = dynamicElement.view.children[0].children[0].container.viewModel;
// now I can change any of its properties
instance.selectedId = 123;
// I also need to watch for a property changes
// I found that I can do it this way
instance.selectedItemChanged = (item => console.log('item changed', item));
Så ja, det fungerer, men det må finnes en bedre måte...ikke sant?