什么时候绑定到ref属性在Aurelia中有效? [英] When does binding to ref attribute become valid in Aurelia?

问题描述

这是此问题的后续措施:访问Aurelia中的DOM元素

This is a follow up to this question: Access a DOM element in Aurelia

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

Is there a hook in the Screen Activation Lifecycle which allows me to run code after ref bindings have been set up? Currently it seems like there is a period of time after the activate hook is called when the ref bindings are not set up yet and then at some point they get activated. I tested this by adding a <div ref="myDiv"></div> to near the bottom of welcome.html in a cloned version of the latest (v0.13.0) skeleton-navigation repo and testing the existence of the reference in the view-model like this:

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

模板底部的代码段...

A snippet of the bottom of the template...

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

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

This is a snapshot of what I see in the console...

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变为有效后，是否有一种挂接到视图模型的方法?

The print outs like this goes on indefinitely. You can see that fullName() is being called regularly to update the screen if the name changes (I assume this is the dirty checking)... but you can see that at the beginning there is a period when the referenced div is NOT valid as a property of the view-model, and then it IS valid. Can someone explain this? Is there a way to hook into the view-model after the ref becomes valid?

推荐答案

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

In general, bindings are processed and available after the bind callback. However, in this case since you need to access the DOM element, you will need the ViewModel to be bound and attached to the view, so use the attached callback.

class ViewModel { 

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

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

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

As you noted in the comments, more information on the activator callbacks is available here: http://aurelia.io/docs.html#extending-html

这篇关于什么时候绑定到ref属性在Aurelia中有效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！