Index empfängt keine Schattenwurzelereignisse in Polymer

Ich versuche, eine Symbolleiste anzuzeigen, die zu meiner index.html-Datei gehört, basierend auf einem Ereignis, das innerhalb eines benutzerdefinierten Elements ausgelöst wird. Ich habe versucht das Beispiel in dem offiziellen Dokument hier zu befolgen: https://www.polymer-project.org/1.0/docs/devguide/events#custom-events Index empfängt keine Schattenwurzelereignisse in Polymer

Aber es funktioniert nicht ... es scheint, dass meine Zuhörer nie das Ereignis

meine benutzerdefinierte Element bekommt:

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

    <script> 

    Polymer({ 
     is: 'page2', 

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

</dom-module>

und in meinem Index:

<page2></page2> 

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

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


}); 
    </script> 
</body>

Also ja, nichts passiert, bekomme ich "foo" in meiner Konsole nie ...

Quelle

2016-05-27 SKMTH

haben Sie mit Klein-nur Namen wie 'Display-menu' versucht? –

Ereignisnamen haben keine Formatanforderungen. Der Name könnte sogar "Display Menu" sein. – tony19

Ihr JS sieht korrekt aus, aber der Elementname ist falsch. Wie in Polymer angegeben docs:

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

So würde "page2" Registrierung mit dem folgenden Fehler fehlschlagen (demo):

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

Wenn Sie das Element umbenennen einen Bindestrich enthalten (zB „x-

<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"), sollten Sie Ihr Beispiel Arbeit sehen

^jsbin

Quelle

2016-05-27 16:43:10 tony19

Hallo, danke, aber das ist nicht das Problem: In meinem echten Code enthält die Elementregistrierung einen Bindestrich. Ich habe es nur schnell bearbeitet, um meinen Buchungskreis nicht zu veröffentlichen. Danke trotzdem, dass du dir die Zeit genommen hast, mir zu antworten und mich an diese Regel zu erinnern, die ich zugeben muss :) Aber ja ... ich verstehe immer noch nicht, warum es nicht funktioniert ... – SKMTH

Es könnte Hilfe, um den Inhalt der Vorlage des Elements anzuzeigen. – tony19

Ok habe den Fehler gefunden. Eigentlich lag es daran, dass ich vorher ein Skript in meiner index.html hatte, das einen (nicht verwandten) Fehler enthielt. Daher wurde der Teil des Skripts, den ich hier geschrieben habe, nicht ausgeführt. Entschuldigung, aber ich danke Ihnen für Ihre Zeit und dafür, dass Sie mich an die Dash-Registrierungsregel erinnert haben :) – SKMTH

Index empfängt keine Schattenwurzelereignisse in Polymer

Antwort

Verwandte Themen