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

Question

在自定义元素中,我想访问a span并将子句附加到它,但所有常用访问器都提供undefined:

<template>
    <template is="dom-if" if="[[condition]]" restamp>
        <span id="myspan"></span>
    </template>
</template>

 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在这种情况下如何访问？

更新:这里是插件

Answer 1

这个在没有setTimeout或this.async的生命周期回调中不起作用的原因是在附加你的元素之后dom-if模板还没有渲染.附加元素后,Polymer会调用附加的回调函数.但是,当在dom-if上设置值时,观察者会运行并去抖它自己的_render函数.debounce等待一段时间来捕获对它的任何其他调用,然后它执行._render函数并将元素附加到DOM.换句话说,当附加的回调运行时,通常dom-if模板还没有渲染.

这次去抖的原因是表现.如果在很短的时间内进行了多次更改,那么当我们关心的结果是最终结果时,这种去抖动会阻止模板多次渲染.

幸运的是,dom-if提供了一个.render()方法,允许你同步渲染它.你需要做的就是为你的dom-if添加一个id,切换到附加的回调并调用如下:

<template>
    <template id="someDomIf" is="dom-if" if="[[condition]]" restamp>
        <span id="myspan"></span>
    </template>
</template>

 attached() {
   this.$.someDomIf.render();
   var c = document.getElementById("myspan"); //<------- should be defined
   var d = this.$$("#myspan");                //<------- should be defined
}

在dom-if上触发同步渲染不应该是一个巨大的性能问题,因为幸运的是你的元素应该只连接一次. 编辑:当它转过来时,这甚至可以在一个准备好的回调中工作:

<template>
    <template id="someDomIf" is="dom-if" if="[[condition]]" restamp>
        <span id="myspan"></span>
    </template>
</template>

 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