未捕獲的ReferenceError抽屜沒有在Polymer 2.0的HTMLElement.onclick中定義？

Question

我很喜歡聚合物2.0，並試圖讓我的腦袋周圍某些錯誤，我似乎不明白。

其中之一是這樣的：

Uncaught ReferenceError: drawer is not defined at HTMLElement.onclick

因此，要解釋我的問題，我想使用app-drawer從左至右上的click事件，將滑動。但是，點擊事件返回上述錯誤。我怎樣才能確保抽屜被定義？ （順便說一下，我正在關注app-layout部分的主要網站提供的代碼片段 - https://www.webcomponents.org/element/PolymerElements/app-layout）。

這裏是我的代碼：

<app-header reveals> 
 
    <app-toolbar> 
 
    <paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button> 
 
    <div main-title>My app</div> 
 
    <paper-icon-button icon="delete"></paper-icon-button> 
 
    <paper-icon-button icon="search"></paper-icon-button> 
 
    <paper-icon-button icon="close"></paper-icon-button> 
 
    <paper-progress value="10" indeterminate bottom-item></paper-progress> 
 
    </app-toolbar> 
 
</app-header> 
 
<app-drawer id="drawer" swipe-open></app-drawer>

這恰恰是在網站上是相同的，那麼爲什麼它爲他們工作，但不是我。

當我點擊菜單圖標時發生問題。

請幫忙。

感謝

Answer 1

，我建議你不要使用onclick ..

他們提供非常糟糕的做法，爲什麼你的代碼是不工作的原因是因爲propably您使用shadow DOM，相反，他們正在使用shady dom。

這意味着，你不能簡單地在影子dom中做document.getElemenetById("drawer").toggle();。有shadowRoots將整個元素包裝到某個不能從外部訪問的塊中。 （除非你使用shadowRoot表示法。）

沒關係，爲了使它工作，你必須做一些樣板函數。首先，使用on-tap而不是onclick。這只是聚合物功能。你paper-icon-button會像：

<paper-icon-button icon="menu" on-tap="openDrawer"></paper-icon-button> 

，然後定義函數openDrawer：

openDrawer: function() { 
    this.$.drawer.toggle(); 
} 

，就是這樣。如果您在Polymer 2.0中使用本地元素，則必須提及Polymer.GestureEventListeners。

class somElement extends Polymer.GestureEventListeners(Polymer.Element){}