在 dom-if 模板中无法通过 id 找到节点

Question

下载 Polymer Starter Kit 后，我在 index.html 中的 dom-bind 模板中包含了一个 dom-if 模板（嵌套）以隐藏整个 UI当用户未通过身份验证时。但是，我无法使用 app.$$(‘#id’) 功能获取 dom-if 元素。

我正在尝试访问 app.closeDrawer 函数中的 paperDrawerPanel (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（来自 PSK 的 routing.html）的代码：

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

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

Answer 1

来自文档：

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.

这意味着您必须添加一个 # 符号来引用使用其 id 的元素。你的代码

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

这样写就可以了

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

Answer 2

element.$$ 在 element 的 DOM 范围内查询。在您的情况下，app 是一个模板，其工作是将 DOM 标记到封闭范围 (body)。

尝试document.querySelector('#paperDrawerPanel')。

在 dom-if 模板中无法通过 id 找到节点

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

polymer

polymer-1.0

polymer-starter-kit