Question

下载Polymer Starter Kit之后，我在index.html中包含了一个dom-if模板（嵌套）dom-bind模板，以便在用户未经过身份验证时隐藏整个UI。但是，我无法使用app. $$（'＃id'）功能获得dom-if元素。

我正在尝试访问app.closeDrawer funcion（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

我猜想，当路由器调用app.closeDrawer时，dom-if元素应该已经被夯实。

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

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

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

Answer 1

来自文档：

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

this.$$(selector)

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

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

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

如果这样写的话应该有效

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

Answer 2

element.$$的DOM范围内的

element个查询。在您的情况下，app是一个模板，其作用是将DOM标记到封闭范围（body）。

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

在dom-if模板

2 个答案: