何时绑定到 ref 属性在 Aurelia 中生效？答案

【问题标题】：When does binding to ref attribute become valid in Aurelia?何时绑定到 ref 属性在 Aurelia 中生效？
【发布时间】：2015-05-01 23:19:25
【问题描述】：

这是对这个问题的跟进：Access a DOM element in Aurelia

屏幕激活生命周期中是否有一个挂钩允许我在设置ref 绑定之后运行代码？目前似乎在调用activate 钩子之后有一段时间，ref 绑定尚未设置，然后在某个时候它们被激活。我通过在最新（v0.13.0）骨架导航存储库的克隆版本中将<div ref="myDiv"></div> 添加到welcome.html 底部附近来测试这一点，并测试视图模型中引用的存在，如下所示：

export class Welcome{
  heading = 'Welcome to the Aurelia Navigation App!';
  firstName = 'John';
  lastName = 'Doe';

  testMyDiv() {
    console.log("Getting my div")
    console.log(this.myDiv)
  }

  get fullName(){
    this.testMyDiv()
    return `${this.firstName} ${this.lastName}`;
  }

  welcome(){
    alert(`Welcome, ${this.fullName}!`);
  }
}

模板底部的一个sn-p...

      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <div ref="myDiv"></div>
  </section>
</template>

这是我在控制台中看到的快照...

welcome.js:10 Getting my div
welcome.js:11 undefined
welcome.js:10 Getting my div
welcome.js:11 undefined
welcome.js:10 Getting my div
welcome.js:11 <div ref="myDiv" class="au-target"></div>
welcome.js:10 Getting my div
welcome.js:11 <div ref="myDiv" class="au-target"></div>
(continues)

这样的打印输出会无限期地进行。您可以看到fullName() 被定期调用以在名称更改时更新屏幕（我假设这是脏检查）......但您可以看到在开始时有一段时间引用的div 是作为视图模型的属性无效，然后它是有效的。有人可以解释一下吗？ ref 生效后有没有办法挂钩到视图模型？

【问题讨论】：

标签： aurelia

【解决方案1】：

通常，绑定在bind 回调之后处理并可用。但是，在这种情况下，由于您需要访问 DOM 元素，因此您需要将 ViewModel 绑定并附加到视图，因此请使用attached 回调。

class ViewModel { 

    bind() {
        this.refItem == undefined; // true
    }

    attached() {
        this.refItem == undefined; // false
    }
}

正如您在 cmets 中所述，有关激活器回调的更多信息可在此处获得：http://aurelia.io/docs.html#extending-html

【讨论】：

不正确，但是，非常有帮助！它为我指明了正确的方向。我需要使用attached 回调，这两者都在“扩展HTML”下的docs 中引用。格拉西亚斯。
我正在修复它，请查看
attached 似乎无法引用 repeat.for 中的元素，其中每个元素都是 ref="currentElementInLoop.htmlElement"`，除非我做错了什么？如果我 @987654330 @ inside attached 它可以工作。
@powerbuoy 查看任务队列，它是 aurelia-framework 的一部分。