javascript - Paper 工具栏 javascript 没有反应

Question

我有一个 polymer paper-toolbar具有一些自定义属性(例如背景颜色和标题)的元素。它含有 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>

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

在我看来，这就像一个错误，但如果有人对此行为有解决方案或解释，我将非常感激。我已经尝试过使用各种其他输入元素，并且具有相同的结果。

控制台.log 的输出: console.log 似乎表明一切都很好。

在第一页(元素正确隐藏/取消隐藏的位置): 第一次点击:<div id="searchbox" class="style-scope tool-bar" hidden="true"> 第二次点击:<div id="searchbox" class="style-scope tool-bar">

然后我移动到另一个页面/元素，它给出了完全相同的结果，除了元素没有隐藏，即使属性 hidden="true" 也是如此。 。然而，当我查看检查元素时，它没有显示属性 hidden="true" .

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

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)。要将此方法与 polymer 元素一起使用，您可以在 this.$ 中的元素引用中调用它。或this.$$ .

对于自定义元素的元素，请使用:

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

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

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

附注:请将您的工具栏重命名为 vims-toolbar或类似的自定义元素命名方案 <namespace>-<element-name> .

进一步阅读: PolymerBase docs