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');
});
}
On Sat, Dec 19, 2015 at 8:59 AM <[email protected]> wrote:
> 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.
>
> 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 [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/polymer-dev/006286f2-edea-4a9b-8232-ae44336984c6%40googlegroups.com
> <https://groups.google.com/d/msgid/polymer-dev/006286f2-edea-4a9b-8232-ae44336984c6%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
> For more options, visit https://groups.google.com/d/optout.
>
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CACGqRCCQmbqKfq9Ntfrx%2BQdAd9BmuK7JG-jk7H2BXzAu-6QHEA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
