纸质工具栏 javascript 没有反应

Question

我有一个 Polymer paper-toolbar 元素，它带有一些自定义属性，例如 background-color 和标题。它包含 a.o。一个搜索按钮，并在其他各种元素中调用。问题是只有第一次调用它的元素会在切换时显示搜索框，而在其他元素中则不会。

这是工具栏的代码：

<template>
    <paper-toolbar class$="{{toolbarSize}}" style$="background-color:{{toolbarColor}};">
      <span class="title"><p>{{topTitle}}</p></span>
            <div id="searchbox">
              <input-search placeholder="Search …"></input-search>
            </div>
            <paper-icon-button id="searchicon" icon="search" on-tap="openSearch"></paper-icon-button>

      <span class="middle title"><h1>{{middleTitle}}</h1></span>
      <span class="bottom title"><p class="subtitle">{{bottomTitle}}</p></span>
    </paper-toolbar>
</template>
<script>
    Polymer({
      is: 'tool-bar',
      properties: {
        topTitle: String,
        middleTitle: String,
        bottomTitle: String,
        toolbarSize: String,
        toolbarColor: String
      },
      openSearch: function() {
        var sb = document.getElementById("searchbox");
        console.log(sb);
        if (sb.hasAttribute("hidden")) {
          sb.removeAttribute("hidden");
        } else {
          sb.setAttribute("hidden", true);
        }
      }
    });
</script>

这是调用各种其他元素的代码：

<paper-scroll-header-panel>
 <div class="paper-header staticpage">
  <tool-bar
    toolbar-color="var(--sc-gold-500)" 
    toolbar-size="tall" 
    middle-title="Titletext" 
    bottom-title="Subtitle text">
  </tool-bar>
 </div>
 <page-view></page-view>
</paper-scroll-header-panel>

当我打开网站并单击搜索图标时，它确实可以很好地切换搜索框。但是当我转到任何其他页面（调用具有不同属性的相同工具栏的不同元素）时，它不再切换工具栏。

这在我看来像是一个错误，但如果有人对此行为有解决方案或解释，我将不胜感激。我已经与其他各种 input-elements 一起尝试过，结果相同。

Console.log 的输出： console.log 似乎表明一切正常。

在第一页（元素 hides/unhides 正确）：第一次点击：<div id="searchbox" class="style-scope tool-bar" hidden="true"> 第二次点击：<div id="searchbox" class="style-scope tool-bar">

然后我转到另一个 page/element，它给出了完全相同的结果，只是元素没有隐藏，即使属性 hidden="true" 也是如此。但是，当我查看 inspect 元素时，它没有显示属性 hidden="true".

但是，当我单击它时 console.log 显示 hidden="true"，然后我返回第一个 page/element，搜索框确实隐藏在第一页上。

Answer 1

因为Polymer是基于Shadow-DOM的，标准的DOM选择器（比如document.getElementById('someId')）不明智会导致意想不到的结果。这是因为自定义元素会将重复的 ID 插入 DOM.

要克服这个问题，您必须改用 Polymer 的元素选择器方法：Polymer.dom(this.root).querySelector('#someId')。这可以方便地缩短为 this.$$.someId。（其中 this 是自定义元素）

修复

对于上面的代码，将 openSearch 函数更改为以下内容：

openSearch: function() {
  this.toggleAttribute('hidden', true, this.$.searchbox);
}

感谢 @Kuba 指出我最初的错误。

修复说明

元素选择

this.$ 是当前自定义元素 (this) 标记到页面时的元素 ID 对象。因此，this.$.searchbox 获取 this 自定义元素的 'searchbox' 元素的元素句柄。这与 document.getElementById(...) 相比，它只会获取在页面上找到的第一个带有 id="searchbox" 的元素，不一定是属于当前自定义元素的元素。

属性切换

Polymer 为其自定义元素的元素句柄（来自 PolymerBase）添加了一些特殊方法。其中之一是 PolymerBase.toggleAttribute(String name [, Boolean value, Element node]) 方法 (link to docs)。要将此方法用于聚合物元素，您可以在 this.$ 或 this.$$.

的元素引用上调用它

对于自定义元素的元素，使用：

this.toggleAttribute('hidden', true, this.$.someElementId)

如果目标元素是polymer加载的自定义元素，也可以使用：

this.$.someElementId.toggleAttribute('hidden')
this.$.someElementId.toggleAttribute('hidden', true)

附带说明：请将您的工具栏重命名为 vims-toolbar 或类似名称，以遵循 <namespace>-<element-name>.[=33= 的自定义元素命名方案]

进一步阅读： PolymerBase docs

纸质工具栏 javascript 没有反应

Paper Toolbar javascript not reacting

javascript

polymer

修复

修复说明

元素选择

属性切换