在自定义元素中,我想访问a span
并将子句附加到它,但所有常用访问器都提供undefined
:
ready() { var a = this.$.myspan; //<------- is undefined var b = this.$$.myspan; //<------- is undefined var c = document.getElementById("myspan"); //<------- is undefined var d = this.$$("#myspan"); //<------- is undefined }
span
在这种情况下如何访问?
更新:这里是插件
这个在没有setTimeout或this.async的生命周期回调中不起作用的原因是在附加你的元素之后dom-if模板还没有渲染.附加元素后,Polymer会调用附加的回调函数.但是,当在dom-if上设置值时,观察者会运行并去抖它自己的_render函数.debounce等待一段时间来捕获对它的任何其他调用,然后它执行._render函数并将元素附加到DOM.换句话说,当附加的回调运行时,通常dom-if模板还没有渲染.
这次去抖的原因是表现.如果在很短的时间内进行了多次更改,那么当我们关心的结果是最终结果时,这种去抖动会阻止模板多次渲染.
幸运的是,dom-if提供了一个.render()方法,允许你同步渲染它.你需要做的就是为你的dom-if添加一个id,切换到附加的回调并调用如下:
attached() { this.$.someDomIf.render(); var c = document.getElementById("myspan"); //<------- should be defined var d = this.$$("#myspan"); //<------- should be defined }
在dom-if上触发同步渲染不应该是一个巨大的性能问题,因为幸运的是你的元素应该只连接一次. 编辑:当它转过来时,这甚至可以在一个准备好的回调中工作:
ready() { this.$.someDomIf.render(); var c = document.getElementById("myspan"); //<------- should be defined var d = this.$$("#myspan"); //<------- should be defined }
看看您的plunker的这个分支:http://plnkr.co/edit/u3richtnt4COpEfx1CSN?p = preview