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?