Los comentarios Disqus no funcionan en un elemento personalizado de polímero

Question

Sep 28, 2016, 11:06 PM

polymer-elements javascript custom-element html5-template polymer

Los comentarios Disqus no funcionan en un elemento personalizado de polímero

No sé cómo hacer que un código de comentarios disqus funcione dentro de mis elementos personalizados.

Estructura de mi sitio:

| index.html
-------- \ (elemento personalizado)my-app.html---------------- \ (elemento personalizado)
---------------- \ (elemento personalizado)my-testView1.htmlNecesito poner comentarios disqus dentro
ymy-testView2.htmlEstructura de

Estructura demy-testView1.htmlEstructura demy-testView2.html

Estructura deindex.html:

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

El disqus divmy-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>

Puse el div de los comentarios disqus dentromy-testView1.html :

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

sobre elmy-testView2.html :

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

para que Chrome pueda encontrarlo. Eso

hipocresía<my-app> encontrarlo si lo pongo dentroindex.html como eso:páginaporque my-app.html es un elemento personalizado en sí mismo y no permitirá que Chrome lo encuentre. Así que tuve que ponerlo fuera de la sombra dom (la<my-testView1> página)

Código Javacript en las páginasmy-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>

yindex.htmlse parece a esto:

Resultadomy-testView1.htmlLos comentarios solo aparecen en uno de estosmy-testView2.html en el momento. Necesito 1 hilo disqus en

<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>

my-testView1.html

y otro hilo disqus enmy-testView1.html my-testView2.htmlmy-testView2.htmlTal vez sea por enrutamiento. El mensaje de la consola Disqus dice que necesito usar el método ajaxhttps://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites Desafortunadamente, no pude hacerlo funcionar cuando reemplacé el código de JavaScript anterior con el código del ejemplo:

dentro de ambos elementos personalizados (cambiando y correspondientemente para cada uno de ellos)

  <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>

Probablemente no tenga que poner el script Disqus en el documento principal. Vea cómo lo coloqué dentro de la plantilla del elemento y enlace eldisqus_identifier propiedad:disqus_urljsbin.com/feqaqig/edit?html,js,output