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

Question

在一个自定义元素中，我想访问一个 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？

更新：这里是 plunk

Answer 1

尝试在附件方法中异步执行如下，此方法有效：

attached: function(){
   this.async(function(){
     var d = this.$$("#myspan"); 
     console.log(d); 
   },someTimeIfThereAreManyItemsToLoad);
}

Answer 2

在没有 setTimeout 或 this.async 的情况下，这在生命周期回调中不起作用的原因是在附加元素后 dom-if 模板尚未呈现。附加您的元素后，Polymer 会调用附加的回调。然而，当在 dom-if 上设置值时，观察者运行并去除其自己的 _render 函数。 debounce 等待一段时间以捕获对它的任何其他调用，然后它执行 ._render 函数并将元素附加到 DOM。换句话说，当附加的回调运行时，通常 dom-if 模板还没有呈现。

这种去抖动的原因是性能。如果在很短的时间内进行了多次更改，这种去抖会阻止模板多次渲染，而我们关心的结果就是最终结果。

幸运的是，dom-if 提供了一个 .render() 方法，可以让你同步渲染。你需要做的就是添加一个 id 到你的 dom-if，切换到附加的回调并像这样调用：

<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 上触发同步渲染不应该是一个巨大的性能问题，因为幸运的是你的元素应该只被附加一次。 编辑： 事实上，这个 even 在准备好的回调中工作：

<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

Answer 3

只有当您的条件最初为真时，以上响应才有效。请参阅我对导致此问题的最初问题的回答：

不确定您是否应该混合来自 Dogs 的 .render-stuff，但我仍然认为观察者将是它的正确位置，否则如果条件最初为假，它就无法工作。

Answer 4

如 Polymer 文档中所述：

Note: Nodes created dynamically using data binding (including those in dom-repeat and dom-if templates) are not added to the this.$ hash. The hash includes only statically created local DOM nodes (that is, the nodes defined in the element’s outermost template).

您将需要使用 this.$$('#yourElementId");

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

How to access content of dom-if inside a custom element?

polymer

polymer-1.0