【发布时间】：2016-09-28 21:06:42
【问题描述】：
我不知道如何让 disqus cmets 代码在我的自定义元素中工作。
我的网站结构：
| index.html
--------\my-app.html（自定义元素）
----------------\ my-testView1.html（自定义元素）
----------------\ my-testView2.html（自定义元素）
我需要将disqus cmets放入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-pages>
my-testView1.html 的结构：
<template>
<content select=".disqusClass1"></content>
</template>
my-testView2.html 的结构：
<template>
<content select=".disqusClass2"></content>
</template>
disqus div
我将disqus cmets 的div 放在<my-app> 中的index.html 上，以便chrome 可以找到它。如果我像这样将它放在<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-pages>
因为 my-app.html 本身就是一个自定义元素，它不会让 chrome 找到它。所以我不得不把它放在 shadow dom 之外（index.html 页面）
my-testView1.html 和 my-testView2.html页面上的 Javacript 代码如下所示：
<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 my-testView2.html 上。我需要 my-testView1.html 上的 1 个 disqus 线程和 my-testView2.html 上的另一个 disqus 线程
也许是因为路由。 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）
【问题讨论】：
-
您可能不必将 Disqus 脚本放在主文档中。看看我如何将它放在元素的模板中并绑定
channelName属性：jsbin.com/feqaqig/edit?html,js,output -
现在想想，将 Disqus 放在 Polymer 元素中可能根本不是一个好主意。它在 Shadow DOM 下不起作用，我真的看不到任何好处
-
@Supersharp 我在问题中添加了 UPDATE #1，如果您有空闲时间，请查看一下吗？
-
@TomaszPluskiewicz 好吧，我将我网站的页面作为自定义元素，我想将 disqus 的
script放入其中一些页面（自定义元素）。但正如你所说，它不会在 shadow dom 中工作，而且我是新手，所以我还不知道如何实现它。不幸的是，聚合物文档中没有关于自定义聚合物元素内部脚本的有用（对于新手）信息 -
每次显示视图（1 或 2）时都应调用 DISQUS.resest() 方法
标签： javascript polymer custom-element polymer-elements html5-template