Aurelia：如何跟踪 @children 元素是否已加载？

Question

我有自定义选项卡功能，但在将 Aurelia 更新到 rc-1.0.x 后，列出来自 @children 装饰器的数据存在问题。

我的代码看起来像： 从'aurelia-framework'导入{inject, customElement, children}；

    @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();

      }

第一次加载时一切正常，this.tabs 是一个项目数组，正如预期的那样。

接下来，如果我执行服务器请求，则当 promise 解决时 this.tabs 控制台日志未定义。

如果我设置超时，它会解决问题，但这是正确的方法吗？

我还注意到在 html 中，执行了 repeat.for 语句，这给了我一个线索，即 this.tabs 在延迟之后收到附加函数被处理。

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>

那么有没有一种方法可以使用 Aurelia 绑定或附加方法或更优雅的方法，而不是使用超时函数检查 this.tabs 的值？

Answer 1

我认为这对于任务队列来说可能是一个足够的用例（但如果知识渊博的人不这么认为，请告诉我）。在从attached 内部访问可绑定值之前，我必须使用任务队列，并且您的实例看起来基本相同（除了您使用@children 访问它们）。

TaskQueue 会将您的逻辑推送到处理堆栈的末尾。所以理论上这意味着它将等待 Aurelia 完成运行其内部逻辑以进行绑定和可能的子装饰器解析，然后运行您的代码。

可能有更好的解决方案，但我之前使用过它来摆脱我之前提到的类似情况，但尚未找到解决问题的更好解决方案，特别是在访问 @ 内部的动态值方面987654323@.

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();
    });
  }