Disqus-Kommentare funktionieren in einem benutzerdefinierten Polymerelement nicht

Question

Sep 28, 2016, 11:06 PM

custom-element javascript polymer-elements polymer html5-template

Disqus-Kommentare funktionieren in einem benutzerdefinierten Polymerelement nicht

Ich weiß nicht, wie ich einen Disqus-Kommentar-Code erstellen soll, damit er in meinen benutzerdefinierten Elementen funktioniert.

Struktur meiner Site:

| index.html
-------- \my-app.html (benutzerdefiniertes Element)
---------------- \my-testView1.html (benutzerdefiniertes Element)
---------------- \my-testView2.html (benutzerdefiniertes Element)

Ich muss disqus Kommentare in @ setzmy-testView1.html undmy-testView2.html

Die Struktur vonindex.html:

 <body>
   <my-app>
      <div class="disqusClass1" id="disqus_thread"></div>
      <div class="disqusClass2" id="disqus_thread"></div>
   <my-app>
</body>

Die Struktur vonmy-app.html:

 <iron-pages>
      <my-testView1 name="testView"><content select=".disqusClass1"></content></my-testView1>
      <my-testView2 name="testView2"><content select=".disqusClass2"></content></div></my-testView2>
    </iron-page‌s>

Die Struktur vonmy-testView1.html :

<template>
  <content select=".disqusClass1"></content>
</template>

Die Struktur vonmy-testView2.html :

<template>
  <content select=".disqusClass2"></content>
</template>

The disqus div

Ich setze das div der disqus Kommentare in<my-app> auf derindex.html so dass Chrom es finden konnte. Eskippe finde es, wenn ich es hinein lege<my-testView1> so wie das

Seitemy-app.html

<iron-pages>
  <my-testView1 name="testView"><div id="disqus_thread"></div></my-testView1>
  <my-testView2 name="testView2"><div id="disqus_thread"></div></my-testView2>
</iron-page‌s>

, weil die my-app.html selbst ein benutzerdefiniertes Element ist und es nicht zulässt, dass Chrome es findet. Also musste ich es außerhalb des Schattendoms platzieren (dasindex.html Seite

Javacript-Code auf den Seitenmy-testView1.html undmy-testView2.htmlsieht aus wie das

<dom-module id="my-testView1">
  <template>
   ...
        <content></content>
   ...
 </template>

  <script>
    Polymer({
      is: 'my-testView1',

      ready: function () 
          {    
             // DEFAULT DISQUS CODE (I changed real URLs though):        
             var disqus_config = function () {
             this.page.url = 'https://www.example.com/testView1'; // Replace PAGE_URL with your page's canonical URL variable
             this.page.identifier = '/testView1'; 
             // this.page.title = 'Test View';
             };

            (function() { 
            var d = document, s = d.createElement('script');
            s.src = '//myChannelName.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
            })();
        }
     });
  </script>
</dom-module>

Ergebni

Comments erscheint nur auf einem diesermy-testView1.html my-testView2.html damals. Ich brauche 1 disqus Thread auf my-testView1.html und ein weiterer Disqus-Thread auf my-testView2.html

Vielleicht liegt es am Routing. Die Disqus-Konsolenmeldung besagt, dass ich die Ajax-Methode @ verwenden mushttps: //help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-site Leider konnte ich es nicht zum Laufen bringen, als ich den obigen Javascript-Code durch den Code aus dem Beispiel ersetzte:

  <script>
    Polymer({
      is: 'my-testView1',

      ready: function () 
          {    
                 var disqus_shortname = 'myDisqusChannelId';
                 var disqus_identifier = '/testView1';
                 var disqus_url = 'http://example.com/testView1';
                 var disqus_config = function () { 
                   this.language = "en";
                 };

                 (function() {
                     var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                     dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
                     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                 })();

                 var reset = function (newIdentifier, newUrl) {
                     DISQUS.reset({
                         reload: true,
                         config: function () {
                             this.page.identifier = newIdentifier;
                             this.page.url = newUrl;
                         }
                     });
                 };
        }
     });
  </script>
</dom-module>

Innerhalb der beiden benutzerdefinierten Elemente (Ändern vondisqus_identifier unddisqus_url entsprechend für jeden von ihnen)