CODEWITHSUNDEEP
polymerpolymer-1.0polymer-starter-kit
Oswaldo
Oswaldo

Reputation: 3376

Can't find node by id in dom-if template

After download Polymer Starter Kit, I included a dom-if template inside (nested) the dom-bind template in index.html to hide the entire UI when user is not authenticated. However, I can’t get dom-if elements using app.$$(‘#id’) feature.

I’m trying to access the paperDrawerPanel in the app.closeDrawer funcion (app.js)

app.closeDrawer = function () {
    console.log(app.$$('#paperDrawerPanel')); //returns null
};

How can I access that element?

Edit 1

This is the html part:

...
<body unresolved>
    <span id="browser-sync-binding"></span>
    <template is="dom-bind" id="app">

        <auth-login id="auth" user="{{user}}" is-authenticated="{{isAuthenticated}}"" location="https://i2bserver.firebaseio.com"></auth-login>

        <template is="dom-if" if="{{isAuthenticated}}">
            <paper-drawer-panel id="paperDrawerPanel" drawer-width="220px" responsive-width="1100px">
...

Edit 2

I guess in the moment that app.closeDrawer is called by the routing.html the dom-if elements should already be tamped.

Here is the code that call app.closeDrawer (routing.html from PSK):

function closeDrawer(ctx, next) {
  app.closeDrawer();
  next();
}

// Routes
page('*', scrollToTop, closeDrawer, function(ctx, next) {
  next();
});

Upvotes: 1

Views: 719

Answers (2)

Scott Miles
Scott Miles

Reputation: 11027

element.$$ queries inside the DOM scope of element. In your case, app is a template whose job is to stamp DOM into the enclosing scope (body).

Try document.querySelector('#paperDrawerPanel').

Upvotes: 1

Neil John Ramal
Neil John Ramal

Reputation: 3734

From the docs:

For locating dynamically-created nodes in your element’s local DOM, use the $$ method:

this.$$(selector)

$$ returns the first node in the local DOM that matches selector.

That means you have to add a # symbol to reference the element using its id. Your code

app.closeDrawer = function () {
  console.log(app.$$('paperDrawerPanel')); //returns null
};

should work if written like this

app.closeDrawer = function () {
  console.log(app.$$('#paperDrawerPanel'));
};

Upvotes: 1

Related Questions