Не удается найти узел по идентификатору в шаблоне dom-if

После загрузки Polymer Starter Kit я включил шаблон dom-if внутри (вложенный) шаблона dom-bind в index.html, чтобы скрыть весь пользовательский интерфейс, когда пользователь не аутентифицирован. Однако я не могу получить элементы dom-if, используя функцию app.$$('#id').

Я пытаюсь получить доступ к paperDrawerPanel в функции app.closeDrawer (app.js)

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

Как я могу получить доступ к этому элементу?

Редактировать 1

Это HTML-часть:

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

Редактировать 2

Я предполагаю, что в тот момент, когда app.closeDrawer вызывается routing.html, элементы dom-if уже должны быть изменены.

Вот код, который вызывает app.closeDrawer (routing.html из PSK):

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

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

2 ответа

Решение

element.$$ запросы внутри области DOM element, В твоем случае, app шаблон, работа которого состоит в том, чтобы помечать DOM во вложенной области видимости (body).

Пытаться document.querySelector('#paperDrawerPanel'),

Из документов:

Для определения местоположения динамически создаваемых узлов в локальном DOM вашего элемента используйте метод $$:

this.$$(selector)

$$ возвращает первый узел в локальной DOM, который соответствует selector,

Это означает, что вы должны добавить # символ для ссылки на элемент, используя его id, Ваш код

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

должно работать, если написано так

app.closeDrawer = function () {
  console.log(app.$$('#paperDrawerPanel'));
};
Другие вопросы по тегам