ポリマー成分は互いに独立していないか？この単純化されたコンポーネントを考える

Question

：

ボタンをクリックする上でダイアログを開くよりも何もしない

<dom-module id="poly-component"> 
<template> 
    <paper-button raised onclick="dialog.open()">Button</paper-button> 
    <paper-dialog id="dialog"><h1>Paper Dialog Here!</h1></paper-dialog> 
</template> 
<script> 
    Polymer({ 
     is: 'poly-component' 
    }) 
</script> 

。 このモジュールは、ページ上で一度使用された場合に機能します。 しかし、それは二回

[...] 
<dom-module id="polyTest-app"> 
    <template> 
     <h2>Hello [[prop1]]</h2> 
     <poly-component></poly-component> 
     <poly-component></poly-component> 
    </template> 
[...] 

挿入されたとき、それはもう動作しません。ボタンをクリック はにつながる：

(index):1 Uncaught TypeError: dialog.open is not a function 

私は何かが足りないのですか？

この例のコードはここで見つけることができます：あなたは正しく、イベントハンドラをバインドしていないので、Example Code on GitHub

Answer 1

あなたのコードが動作することはできません。

onclickなどの組み込みハンドラは、dialogが存在しないグローバルスコープ内のコードのビットを実行しようとします。したがって、エラー。ここで

は、あなたが気づく、

<dom-module id="poly-component"> 
    <template> 
    <paper-button raised on-click="_dialogOpen">Button</paper-button> 
    <paper-dialog id="dialog"><h1>Paper Dialog Here!</h1></paper-dialog> 
    </template> 
    <script> 
    Polymer({ 
     is: 'poly-component', 
     _dialogOpen: function() { 
      this.$.dialog.open(); 
     } 
    }) 
    </script> 
</dom-module> 

まず、あなたのコードを書き換えることができる方法ですかon-clickからonclick変更 - ポリマーevent handling notation。 PS。 tapイベントが推奨されます。

第2に、コードから他の要素にしかアクセスできません。バインディングには直接的ではありません。したがって、_dialogOpenの機能。

UPDATE

[OK]を、私は何が起こっているか知っています。与えられたidを持つ要素が1つしかない場合、ブラウザはグローバルスコープ内のそのIDで単純に使用します。

シェイディDOMを使用すると、あなたのpoly-component要素の2つのインスタンスが2つの<dialog id="dialog">をレンダリングします。この時点でwindow.dialogはもう利用できません。

また、Polymerを使用すると、this.$の表記をローカルDOMの要素を参照するのにAutomatic node findingとする方が安全です。