修复

Question

我有一个Polymer paper-toolbar元素，它接受一些自定义属性，如background-color和titles。它包含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>

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

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

Console.log的输出： console.log似乎表明一切都很好。

在第一页（元素正确隐藏/取消隐藏）：首先点击：<div id="searchbox" class="style-scope tool-bar" hidden="true"> 第二次点击：<div id="searchbox" class="style-scope tool-bar">

然后我移动到另一个页面/元素，它给出完全相同的结果，除了该元素不隐藏，即使属性hidden="true"。但是，当我查看inspect元素时，它不会显示属性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获取此自定义元素的'searchbox'元素的元素句柄。这与document.getElementById(...)相比较，id="searchbox"只会获得在页面上找到PolymerBase的第一个元素，而不一定是属于当前自定义元素的元素。

属性切换

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

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

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

如果目标元素是聚合物加载的自定义元素，您还可以使用：

this.$.someElementId.toggleAttribute('hidden', true)
vims-toolbar

作为旁注：请将工具栏重命名为<namespace>-<element-name>或类似，以遵循RealmRecyclerViewAdapter的自定义元素命名方案。

进一步阅读： PolymerBase docs

纸工具栏javascript没有反应

1 个答案:

修复

修复说明

元素选择

属性切换