Комментарии Disqus не работают в пользовательском элементе из полимера

Я не знаю, как сделать код комментариев disqus для работы внутри моих пользовательских элементов.

Структура моего сайта:

| index.html
-------- \ my-app.html (пользовательский элемент)
---------------- \ my-testView1.html (пользовательский элемент)
---------------- \ my-testView2.html (пользовательский элемент)

Мне нужно поместить комментарии disqus внутри my-testView1.html а также my-testView2.html

Структура index.html:

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

Структура my-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>

Структура my-testView1.html:

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

Структура my-testView2.html:

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

Дискуссия

Я поместил div комментариев disqus внутри <my-app> на index.html чтобы хром мог его найти. Он не может найти его, если я положу его внутрь <my-testView1> как это:

страница my-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>

потому что my-app.html сам по себе является пользовательским элементом и не позволяет chrome его найти. Поэтому я должен был положить его за пределы теневого дома (index.html страница)

Код Javacript на страницах my-testView1.html а также my-testView2.htmlвыглядеть так:

<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.htmlmy-testView2.html в это время. Мне нужен 1 поток обсуждения в my-testView1.html и другой поток обсуждения в my-testView2.html

Может быть, это из-за маршрутизации. В консольном сообщении Disqus говорится, что мне нужно использовать ajax-метод https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites К сожалению, я не смог заставить его работать после замены javascript код выше с кодом из примера:

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

внутри обоих пользовательских элементов (изменение disqus_identifier а также disqus_url соответственно для каждого из них)

Источник

2 ответа

Решение

Ошибка связана с тем, что библиотека disqus не может найти <div id="disqus_thread"> элемент.

Это потому, что этот элемент находится внутри Shadow DOM (и именно поэтому он отлично работает в Firefox, который не реализует реальный Shadow DOM).

3 возможных решения:

  1. Не используйте Shadow DOM с вашими полимерными элементами.
  2. Не кладите #disqus_thread элемент в элементе Polymer (вставьте его в обычный DOM).
  3. использование <content> в вашем <template>и #disqus_thread элемент внутри полимерного тега, чтобы сделать его доступным для библиотеки:

В пользовательских элементах:

<template>
   //HTML code here
   <content></content>
</template>

На странице HTML, где вы вставляете пользовательский элемент:

<my-app>
   <my-testView>
      <div id="disqus_thread"></div>
   </my-testView>
</my-app>

<div> будет выявлено в месте, где (вложенный) <content> теги размещены.

Источник

Я хотел дать другое возможное решение для использования комментариев Disqus в Polymer. Основная проблема заключается в невозможности использования Disqus с элементами теневого домена, поскольку они скрыты. Итак, как мы можем сделать элемент теневого дома видимым? Мы можем передать его по иерархии компонентов из index.html приложения.

Чтобы раскрыть структуру элемента вашего HTML, как это:

index.html
<polymer-app>
  <div id="disqus_thread">
</polymer-app>

В приложении Polymer:

<dom-module id="polymer-app">
  <template>
      <slot></slot>
  <template>
</dom-module>

Слот - это то место, где будет отображаться #disqus_thread. И вы можете передать его дальше другим компонентам, внутри полимерного приложения.

<dom-module id="polymer-app">
  <template>
    <my-page>
      <slot></slot>
    </my-page>
  <template>
</dom-module>

Примечание. Этот код является лишь примером. Не пытайтесь копировать и вставлять, он не запустится.

Источник
Другие вопросы по тегам