Question

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

我的代码看起来像：从＆aurelia-framework＆＃39;;

导入{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 是一系列项目，正如预期的那样。

接下来，如果我发出服务器请求，则解析承诺 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完成运行其内部逻辑的绑定和可能的子装饰器解析，然后运行你的代码。

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

attached

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

1 个答案: