javascript - 如何使 disqus 评论 javascript 代码在 polymer 自定义元素中工作

Question

我正在使用 polymer 入门套件 2.0

嵌套自定义元素的结构:

(意思是 <my-app></my-app> 在 index.html 等里面):

| index.html
--------\my-app.html(自定义元素)
--------------\my-testView1.html(自定义元素)
--------------\my-testView2.html(自定义元素)

我需要在 my-testView1.html 和 my-testView2.html 页面上添加 disqus 评论(每个单独的线程)

我试图让它工作，有一次 chrome 的控制台消息告诉我必须使用 ajax 方法(因为 my-testView1.html 和 my-testView2.html 都在 <iron-pages> 中，所以路由正在进行，我想这就是原因)它也给了我这个链接 https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites

my-testView1.html的结构:

(我把 example.com 和 myChannelID 改成了实名)

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

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

      )};
    </script>

    <script>
      var disqus_config = function () {
        this.page.url = 'https://www.example.com/testView1'; 
        this.page.identifier = '/testView1'; 
        this.page.title = 'Test View1';
        };


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

      DISQUS.reset({
          reload: true,
          config: function () {
            this.page.identifier = "/testView1";
            this.page.url = "https://www.example.com/#!testView1";
        }
        });
    </script>
</dom-module>

my-testView2.html的结构(与第一个相同):

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

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

    });
  </script>
  <script>
     var disqus_config = function () {
        this.page.url = 'https://www.example.com/testView2'; 
        this.page.identifier = '/testView2'; 
        this.page.title = 'Test View2';
        };


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

      DISQUS.reset({
          reload: true,
          config: function () {
            this.page.identifier = "/testView2";
            this.page.url = "https://www.example.com/#!testView2";
        }
        });
    </script>

让我走到这一步的问题早先在这里被问过:Disqus comments don't work in a polymer custom element
在一些帮助和指导下，我设法做到了这一点。但我仍然不能让它与 ajax 一起工作，这样它就会将单独的 disqus 线程加载到每个页面。

可能与#!有关或者我必须将它插入 ready: function() {} 中但如果我这样做，它只会破坏布局，所以我把它放在一个单独的标签中，现在它显示 DISQUS is not defined .我不知道我在那里错过了什么。

我只有 50 声望赏金可以分享，但如果你知道如何让它发挥作用，请你解释一下如何修复它。

Answer 1

<div id="disqus_thread">元素在页面中必须是唯一的，因为它是 disqus 库将安装下载线程的地方。所以你应该在 <iron-pages> 之后添加它标签。

<div>
  <iron-pages>
    <view-1></view-1>
    <view-2></view-2>
  </iron-page‌​s>
</div>
<div id="disqus_thread"></div>

---

然后你必须调用DISQUS.reset()每次显示一个子页面。你可以知道它是因为一个类 iron-selected被添加到所选元素。所以你可以收听 attributeChange() Polymer 元素的回调，并检查它是否包含 iron-selected类(class)。如果是真的，您可以调用DISQUS.reset()使用您要加载的线程的标识符。

Polymer( {
    is: 'view-1',
    attributeChanged: function ( name, old, value )
    {
        if ( name == 'class' && this.classList.contains( 'iron-selected' ) )
        {   
            //call DISQUS.reset() here
            DISQUS.reset( {
                reload: true,
                config: function () 
                {
                    this.page.identifier = "/testView1"
                    this.page.url = "https://www.example.com/testView1"
                }
            } )
        }
    }
} ) 

---

此外，由于您使用 DISQUS.reset() , 你可以删除 var disqus_config = ...

---

为了解决 <div id=disqus_thread> 的唯一性问题元素:

如果你想把它插入到右页里面，你可以使用appendChild()在调用 DISQUS.reset() 之前移动它.例如把它放在 <div id='container'> 中元素。

内部 attributeChange()方法:

this.$.container.appendChild( document.getElementById( 'disqus_thread' ) )

在 view-1 <template> 里面:

<template>
  //Page content
  <div id=container></div>
  //Page footer
</template>