Question

这是对此问题的跟进：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}!`); } }

模板底部的片段......

<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()来更新屏幕（我假设这是脏检查）...但是您可以看到在开头有一段时间引用了{{ 1}}无效作为视图模型的属性，然后它是有效的。有人可以解释一下吗？在div生效后，有没有办法挂钩到视图模型？

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中变得有效？

1 个答案: