Не удается найти узел по идентификатору в шаблоне 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'));
};