Paper Toolbar JavaScript沒有反應

Question

我有一個Polymer paper-toolbar元素，它帶有一些自定義屬性，例如background-color和title。 它包含一個搜索按鈕，並在其他各種元素中調用。 問題在於，只有在首次調用該元素時，該元素才會在切換時顯示搜索框，而在其他元素中則不會。

這是工具欄的代碼：

<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"元素，而不一定是屬於當前自定義元素的元素。

屬性切換

Polymer為其自定義元素的元素句柄（來自PolymerBase ）添加了一些特殊方法。 其中之一是PolymerBase.toggleAttribute(String name [, Boolean value, Element node])方法（ 鏈接到docs ）。 若要將此方法與聚合物元素一起使用，請在this.$或this.$$的元素引用上調用它。

對於自定義元素的元素，請使用：

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

如果目標元素是聚合物加載的自定義元素，則還可以使用：

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

注意：將工具欄重命名為vims-toolbar或類似名稱，以遵循<namespace>-<element-name>的自定義元素命名方案。

進一步閱讀： PolymerBase文檔