什么时候绑定到 ref 属性在 Aurelia 中生效？

Question

这是对这个问题的跟进：

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

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}!`); } }

模板底部的片段...

<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 生效后，有没有办法连接到视图模型？

Answer 1

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

class ViewModel { 

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

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

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

什么时候绑定到 ref 属性在 Aurelia 中生效？

When does binding to ref attribute become valid in Aurelia?

aurelia