Polymer：Uncaught TypeError：无法读取未定义的属性'persistent' [英] Polymer: Uncaught TypeError: Cannot read property 'persistent' of undefined

问题描述

当我尝试在登录页面中隐藏抽屉时，会出现错误。我使用 dom-if 来隐藏菜单栏并根据它的语法我使用< template> 标记。但它出现错误。

when I try to hide drawer in Login page it occur error. I use dom-if for hiding menubar and according to it's syntax I used <template> tag. But it occur error.

聚合物代码

<!-- Drawer content -->
<template is="dom-if" if="[[_isLogin()]]">
  <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
    <app-toolbar>Menu</app-toolbar>
    <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
      <a name="homepage" href="[[rootPath]]homepage">Homepage</a>
      <a name="profile" href="[[rootPath]]profile">Profile</a>
      <a name="temp" href="[[rootPath]]temp">Temp</a>
    </iron-selector>
  </app-drawer>
</template>

脚本

_routePageChanged(page) {
  if(this._isLogin()) {
      // If no page was found in the route data, page will be an empty string.
      // Default to 'homepage' in that case.
      this.page = page || 'homepage';

      // Close a non-persistent drawer when the page & route are changed.
      if (!this.$.drawer.persistent) {
          this.$.drawer.close();
      }
  } else {
      this.page = 'login';
  }
}

注意： _isLogin（） 在那里，它返回 true 或 false

Note: _isLogin() is there, it return true or false

推荐答案

正如您在文档中看到的那样这里，节点使用数据绑定创建动态（包括dom-repeat和 dom-if templates）没有被添加到这个。$ hash

As you can see in the docs here, the "Nodes created dynamically using data binding (including those in dom-repeat and dom-if templates) are not added to the this.$ hash"

所以，因为那个元素在dom-if里面，你不会能够使用这个快捷方式来获取它的引用。所以你必须坚持使用旧的 getElementById ，同时请记住，您不是在查询文档，而是使用本地阴影dom。所以这个：

So, since that element is inside a dom-if, you won't be able to use this "shortcut" to get a reference to it. So you'll have to stick with the "old" getElementById, while keeping in mind that you are not querying the document, but the local shadow dom instead. So this:

  if (!this.$.drawer.persistent) {
      this.$.drawer.close();
  }

可能会变成：

  var drawer = this.shadowRoot.getElementById('drawer');
  if (drawer.persistent) {
    drawer.close();
  }

UPDATE ：既然你说的话仍然不起作用，我想我应该提一下你需要考虑的另一件事。在您的代码中，显示该元素和查询它的条件是相同的，由 _isLogin 方法返回。

UPDATE: since you're saying that it still doesn't work, I figured I should mention another thing you need to consider. In your code both showing that element and the condition to query for it are the same, returned by the _isLogin method.

老实说，我不知道我要建议的是原因或推荐的解决方案，但我认为你应该给它时间来实际盖章进入页面的元素能够查询它（解决单个执行线程和类似的东西）。因此，作为解决方法，您可以将代码包装在 setTimeout中回调，如下所示：

To be honest, I don't know if what I am about to suggest is the reason or the recommended solution, but I figured you should give it time to actually stamp the element into the page to be able to query for it (to work around the single execution thread and stuff like that). So as a workaround for this you could wrap your code in a setTimeout callback, like this:

setTimeout(() => {
  var drawer = this.shadowRoot.getElementById('drawer');
  if (drawer.persistent) {
    drawer.close();
  }
});

由于没有提供第二个参数，即超时，你基本上是在说尽快做到这一点，但不是现在。

Since the second parameter, the timeout, is not provided, you're basically saying "do this as soon as possible, but not right now".

这篇关于Polymer：Uncaught TypeError：无法读取未定义的属性'persistent'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！