如何在自定义元素中访问dom-if的内容? [英] How to access content of dom-if inside a custom element?

问题描述

在自定义元素中，我想访问span并为其添加一个子元素，但所有常规访问器都给出undefined:

In a custom element I want to access a span and append a child to it but all usual accessors give 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?

How to access a span in this case?

更新:这是插头

推荐答案

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

The reason this didn't work inside the lifecycle callback without setTimeout or this.async is that right after attaching your element the dom-if template has not yet rendered. Upon attaching your element, Polymer calls the attached callback. However, when the value gets set on the the dom-if, an observer runs and debounces its own _render function. The debounce waits an amount of time to catch any other calls to it, and then it executes the ._render function and attaches the element to the DOM. In other words, when the attached callback runs, normally the dom-if template hasn't rendered yet.

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

The reason for this debounce is performance. If several changes were made within a very short span of time, this debounce prevents the template from rendering several times when the result we would care about is the end result.

幸运的是，dom-if提供了.render()方法，使您可以使其同步呈现.您需要做的就是向dom-if添加一个ID，如果要切换到附件回调并这样调用:

Fortunately, dom-if provides a .render() method which allows you to make it render synchronously. All you need to do is add an id to your dom-if, switch to an attached callback and call like this:

<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上触发同步渲染应该不是一个很大的性能问题，因为幸运的是，您的元素只能被附加一次. 在运行时，此 even 可以在现成的回调中工作:

Triggering a synchronous render on the dom-if shouldn't be a huge performance problem, since luckily your element should only be getting attached once. As it turns it, this even works in a ready callback:

<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
}

请参阅您的pl缩者的叉子: http://plnkr.co/edit/u3richtnt4COpEfx1CSN?p=preview

See this fork of your plunker: http://plnkr.co/edit/u3richtnt4COpEfx1CSN?p=preview

这篇关于如何在自定义元素中访问dom-if的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！