我不知道如何在我的自定义元素中使用disqus注释代码。
| index.html
-------- \ my-app.html（自定义元素）
---------------- \ my-testView1.html（自定义元素）
---------------- \ my-testView2.html（自定义元素）
我需要在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>
我将<my-app>内的disqus评论的div放在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找到它。所以我不得不把它放在阴影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控制台消息说我需要使用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）
答案 0 :(得分：1)
错误是由于 disqus 库无法找到<div id="disqus_thread">元素。
这是因为这个元素在Shadow DOM中（这就是为什么它在Firefox中没有实现真正的Shadow DOM的原因）。
3种可能的解决方案：
#disqus_thread元素放在Polymer元素中（将其插入普通DOM中）。<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>标记所在的位置显示。
答案 1 :(得分：0)
我想在Polymer中使用Disqus注释提供另一种可能的解决方案。主要问题是无法使用Disqus与阴影dom中的元素，因为它们是隐藏的。那么我们如何才能看到阴影dom元素？我们可以从应用程序的index.html向下传递组件层次结构。
要像这样公开你的html元素结构：
index.html
<polymer-app>
<div id="disqus_thread">
</polymer-app>
在Polymer App中：
<dom-module id="polymer-app">
<template>
<slot></slot>
<template>
</dom-module>
Slot是#disqus_thread将显示的位置。你可以将它进一步传递给其他组件，在polymer-app里面。
<dom-module id="polymer-app">
<template>
<my-page>
<slot></slot>
</my-page>
<template>
</dom-module>
注意：这是代码只是一个例子。不要尝试复制和粘贴，它不会运行。