インデックスはポリマー内の影のルートイベントを受け取りません

カスタム要素内で発生するイベントに基づいて、index.htmlファイルに属するツールバーを表示しようとしています。私のリスナーがイベントインデックスはポリマー内の影のルートイベントを受け取りません

私のカスタム要素を取得したことがないようだ... https://www.polymer-project.org/1.0/docs/devguide/events#custom-events

しかし、それは動作しません：

<dom-module id="page2"> 
    <template> 
    ... 
    some HTML code here 
    ... 
    </template> 

    <script> 

    Polymer({ 
     is: 'page2', 

     rowClicked: function (e) { 
       this.fire('displayMenu'); 
      } 
    }); 
    </script> 

</dom-module>

私はここに公式のドキュメントで与えられた例に従うことを試してみました

と私のインデックスに：

<page2></page2> 

<script> 
    document.addEventListener('WebComponentsReady', function() { 

    document.querySelector('page2').addEventListener('displayMenu', function() { 
     console.log('foo'); 
    }); 


}); 
    </script> 
</body>

そうそう、何も起こりません、私は...私のコンソールで "foo" を取得することはありません

出典

2016-05-27 SKMTH

あなたは 'ディスプレイmenu'のような小文字のみの名前で試してみましたか？ –

イベント名にはフォーマット要件がありません。名前は '' display menu ''であってもかまいません。 – tony19

あなたのJSは正しく見えますが、要素名が間違っています。ポリマーdocsに示されているように：あなたが（例えば、「X-ダッシュを含めるように要素の名前を変更する場合

"Error: Failed to execute 'registerElement' on 'Document': Registration failed for type 'page2'. The type name is invalid.

：

By specification, the custom element's name must contain a dash (-).

ので、"page2"は、次のエラー（demo）への登録を失敗していました

<head> <base href="https://polygit.org/polymer+:master/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> </head> <body> <x-page2></x-page2> <script> document.addEventListener('WebComponentsReady', function() { document.querySelector('x-page2').addEventListener('displayMenu', function() { console.log('foo'); }); }); </script> <dom-module id="x-page2"> <template> <button on-click="rowClicked">click me to fire event</button> </template> <script> HTMLImports.whenReady(function() { Polymer({ is: 'x-page2', rowClicked: function() { this.fire('displayMenu'); } }); }); </script> </dom-module> </body>

：PAGE2"）、あなたはあなたの例の動作を確認する必要があります

^jsbin

出典

2016-05-27 16:43:10 tony19

ホー、ありがとう、それは問題ではない：私の実際のコードでは、要素の登録にダッシュが含まれています。会社コードを公開しないようにすばやく編集しました。とにかく私に答える時間を取ってくれてありがとうと、このルールを思い出させるために、私は忘れてしまったことを認めなければなりません:) しかし、私はまだそれがうまくいかない理由はありません... – SKMTH

要素のテンプレートの内容を表示するのに役立ちます。 – tony19

Okはこのバグを見つけました。実際には、（関連性のない）エラーが含まれていたindex.htmlに、以前にスクリプトがあるためでした。したがって、私がここに書いたスクリプトの部分は実行されませんでした。申し訳ありませんが、あなたの時間と私にダッシュの登録ルールを思い出させるために感謝します:) – SKMTH

インデックスはポリマー内の影のルートイベントを受け取りません

答えて

関連する問題