什么时候绑定到ref属性在Aurelia中变得有效？

Question

这是对这个问题的跟进:访问Aurelia中的DOM元素

屏幕激活生命周期中是否有一个钩子允许我在 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()如果名称更改,我会定期调用以更新屏幕(我假设这是脏检查)...但是您可以看到,在开头有一段时间被引用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