Comentários Disqus não funcionam em um elemento personalizado de polímero

Question

Sep 28, 2016, 11:06 PM

html5-template polymer javascript polymer-elements custom-element

Comentários Disqus não funcionam em um elemento personalizado de polímero

Não sei como criar um código de comentários disqus para trabalhar dentro dos meus elementos personalizados.

Estrutura do meu site:

| index.html
-------- \ (elemento personalizado)my-app.html---------------- \ (elemento personalizado)
---------------- \ (elemento personalizado)my-testView1.htmlEu preciso colocar comentários disqus dentro
emy-testView2.htmlEstrutura de

Estrutura demy-testView1.htmlEstrutura demy-testView2.html

Estrutura deindex.html:

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

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

Coloquei a div dos comentários disqus dentromy-testView1.html :

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

nomy-testView2.html :

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

para que o cromo pudesse encontrá-lo. isto

não pode<my-app> encontre se eu colocar dentroindex.html Curtiu isso:páginaporque o my-app.html é um elemento personalizado e não permite que o chrome o encontre. Então eu tive que colocá-lo fora da sombra dom (o<my-testView1> página)

Código Javacript nas 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>

eindex.htmlparece com isso:

Resultadomy-testView1.htmlOs comentários aparecem apenas em um dessesmy-testView2.html no momento. Eu preciso de 1 disqus thread em

<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

e outra discussão disqus emmy-testView1.html my-testView2.htmlmy-testView2.htmlTalvez seja por causa do roteamento. A mensagem do console Disqus diz que eu preciso usar o método ajaxhttps://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites Infelizmente, não consegui fazê-lo funcionar quando substituí o código javascript acima pelo código do exemplo:

dentro de ambos os elementos personalizados e correspondentemente para cada um deles)

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

Você provavelmente não precisa colocar o script Disqus no documento principal. Veja como eu o coloquei dentro do modelo do elemento e vincule odisqus_identifier propriedade:disqus_urljsbin.com/feqaqig/edit?html,js,output