Accessing dom-if elements

[rik...@gmail.com]

How i can access an element inside dom-if condition?

That's part of my template:

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

I need to access #userLevelBadge in Javascript like that:

Look in the ready method.

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

But it does not work. The condition is meet, and the HTML inside dom-if is displayed, but i can't access it using this.$$(selector), as specified in the Wiki.

[Eric Bidelman]

You need to wait a tick after `level` has gone truthy so the template is stamped in the DOM. 

ready: function() {

      this.async(function() {

        var userLevelBadge = this.$$('#userLevelBadge');

      });

},

Better is to define an observer for `level`. A computed property is also a good idea if you later change the args for `_displayUserLevelBadge(level)`:

displayBadge: {

        type: Boolean,

        value: false,

        computed: '_displayUserLevelBadge(level)',

        observer: 'displayBadgeChanged'

},

displayBadgeChanged: function() {

  this.async(function() { // wait for dom to stamp

    var userLevelBadge = this.$$('#userLevelBadge');

  });

}

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/006286f2-edea-4a9b-8232-ae44336984c6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[rik...@gmail.com]

Thank you very much!

I've used the second method, and works perfectly!
Thanks again!