10

这是对这个问题的跟进：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">​&lt;/div>​
welcome.js:10 Getting my div
welcome.js:11 <div ref=​"myDiv" class=​"au-target">​&lt;/div>​
(continues)

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

4

1 回答 1

9

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

class ViewModel { 

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

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

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

于 2015-05-01T14:41:14.107 回答