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

【问题标题】：Can't find node by id in dom-if template在 dom-if 模板中无法通过 id 找到节点
【发布时间】：2016-02-14 18:27:20
【问题描述】：

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

我正在尝试访问 app.closeDrawer 函数 (app.js) 中的 paperDrawerPanel

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

我猜在routing.html调用app.closeDrawer的那一刻，dom-if元素应该已经被夯实了。

这里是调用 app.closeDrawer（来自 PSK 的routing.html）的代码：

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

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

【问题讨论】：

显示出来了吗？您不能查询不存在的元素，如果 dom-if 表达式为 false，则这些元素不存在。如果你需要这个使用 hidden 而不是 dom-if。
是的，它们已显示（如果尝试访问元素时条件为真）
请添加更多代码和html

标签： polymer polymer-1.0 polymer-starter-kit

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

来自文档：

要在元素的本地 DOM 中定位动态创建的节点，请使用 $$ 方法：

this.$$(selector)

$$ 返回本地 DOM 中与 selector 匹配的第一个节点。

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

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

如果这样写应该可以工作

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

【讨论】：

很抱歉，我已经在选择器中使用了#，只是忘了在这个例子中输入。还是行不通。我会编辑