Aurelia: Wie kann man verfolgen, ob @children-Elemente geladen sind?

Question

Ich habe benutzerdefinierte Tabs-Funktionalität, aber nach dem Update von Aurelia auf rc-1.0.x, gibt es ein Problem mit Auflistungsdaten von @children Dekorator.

Mein Code sieht in etwa so aus: import {inject, customElement, children} aus 'aurelia-framework';

@customElement('tabs') 
    @inject(Element) 
    @children({name:'tabs', selector: "tab"}) 

    export class Tabs { 
     activeTab = undefined; 

     constructor(element) { 
     this.element = element; 
     } 

     attached() { 
     console.log(this.tabs); // Return undefined on promise resolve!!! 
     this.tabs.forEach(tab => { 
      if (tab.active) { 
      this.activeTab = tab; 
      } 

      tab.hide(); 
     }); 

     this.activeTab.show(); 

     } 

Auf dem ersten Last alles funktioniert ganz gut, und this.tabs ist ein Array von Elementen, wie erwartet.

Als nächstes, wenn ich eine Server-Anfrage, wenn Versprechen ist gelöst this.tabs Konsole Protokolle undefiniert.

Wenn ich Timeout einstellen behebt das Problem, aber ist das der richtige Weg?

Auch bemerkte ich in dem HTML-Code, dass die repeat.for Anweisung ausgeführt wird, die mir einen Hinweis geben, dass this.tabs mit einem gewissen Verzögerung empfangen wird, nachdem die angeschlossene Funktion behandelt wird.

Die html:

<template> 
    <ul class="nav nav-tabs m-b-1"> 
    <li repeat.for="tab of tabs"> 
     <a href="#" click.trigger="$parent.onTabClick(tab)"> 
     ${tab.name & t} 
     </a> 
    </li> 
    </ul> 
    <slot></slot> 
</template> 

So ist es eine Möglichkeit, dass die Arbeit mit der Aurelia binden oder an Methoden oder eine elegantere Art und Weise zu machen, anstatt den Wert this.tabs mit einer Timeout-Funktion zu überprüfen?

Answer 1

Ich denke, dass dies ein angemessener Anwendungsfall für die Task-Warteschlange sein könnte (aber wenn jemand kenntnisreich anderes denkt, lassen Sie es mich wissen). Ich musste die Task-Warteschlange verwenden, bevor ich auf bindbare Werte innerhalb von attached zugreife, und Ihre Instanz sieht im Grunde gleich aus (außer Sie greifen auf sie unter Verwendung von zu).

Die TaskQueue verschiebt Ihre Logik an das Ende des Verarbeitungsstapels. Theoretisch bedeutet das, dass es darauf wartet, dass Aurelia seine interne Logik für Bindings und möglicherweise Kinderdekorator-Auflösung ausführt und dann Ihren Code ausführt.

Es könnte eine bessere Lösung geben, aber ich habe diese bereits verwendet, um aus einer ähnlichen Situation wie oben erwähnt herauszukommen und muss noch eine bessere Lösung finden, die das Problem behebt, insbesondere beim Zugriff auf dynamische Werte attached.

import {TaskQueue} from 'aurelia-framework'; 

@customElement('tabs') 
@inject(Element, TaskQueue) 
@children({name:'tabs', selector: "tab"}) 

export class Tabs { 
    activeTab = undefined; 

    constructor(element, taskQueue) { 
    this.element = element; 
    this.taskQueue = taskQueue; 
    } 

    attached() { 
    this.taskQueue.queueMicroTask(() =>{ 
     this.tabs.forEach(tab => { 
      if (tab.active) { 
       this.activeTab = tab; 
      } 

      tab.hide(); 
     }); 

     this.activeTab.show(); 
    }); 
    }