当前位置:  开发笔记 > 编程语言 > 正文

如何在自定义元素中访问dom-if的内容?

如何解决《如何在自定义元素中访问dom-if的内容?》经验,为你挑选了1个好方法。

在自定义元素中,我想访问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在这种情况下如何访问?

更新:这里是插件



1> Dogs..:

这个在没有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

推荐阅读
sx-March23
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有