访问聚合物动态元素

Accessing Polymer dynamic elements

本文关键字：元素 动态 聚合物 访问      更新时间：2023-09-26

如何访问dom-if条件内的元素？

这是我模板的一部分：

<template>
   ...
   <template is="dom-if" if="{{_displayUserLevelBadge(level)}}">
      <div class="profileUserLevelContainer">
         <iron-icon id="userLevelBadge" class="icon-20" icon="chat:verified-user"></iron-icon>
         <span class="profileUserLevel">{{userLevelString}}</span>
      </div>
   </template>
   ...
</template>

我需要访问Javascript中的#userLevelBadge，如下所示：查看ready方法。

Polymer({
  is: 'custom-element',
    properties: {
      level: {
        type: String,
        value: null
      },
      userLevelString: {
        type: String,
        value: ''
      }
    },
    ready: function() {
      var userLevelBadge = this.$$('#userLevelBadge'); //return undefined
    },
    _displayUserLevelBadge: function(){
      //not including my code
      //Just returning true for simplicity
      return true;
    }
}

但它不起作用。条件满足，并且显示dom-if中的HTML，但我不能使用this.$$(selector)访问它，正如在Wiki中指定的那样。

Fiddle：https://jsfiddle.net/Fr0z3n/sntyw50u/

将代码包装在this.async()中，给Polymer一些时间来标记模板内容。

相关文章：