将disqus与emberjs集成仅适用于首页加载

Question

我正在运行ember-1.0.0-rc.5并为disqus注释创建了一个视图，我正在传递文章ID。

我的问题是，disqus不知道我何时从一个页面切换到另一个页面。

这是视图代码：

App.DisqusView = Ember.View.extend({
  tagName: 'div',
  elementId: 'disqus_thread',
  didInsertElement: function(){
    var root_url = "http://my-root-url.herokuapp.com"
    var page_id = this.get('identifier');

    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_identifier = "item-" + page_id;
    console.log(disqus_identifier);
     / this outputs the correct id/

    var disqus_title = "the song title" ;
    console.log(disqus_title);
     / this outputs the correct title/

    var disqus_url =  root_url + '/#/song/' + page_id;
    console.log(disqus_url);
     / this outputs the correct url for the page/

    var disqus_shortname = 'example'; 

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (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);
    })();
  }
});

这是在我的车把模板中：

{{view App.DisqusView identifierBinding="id"}}

因此，评论会在所有页面上呈现，但一条评论仍然存在于所有页面，就好像disqus认为它们都是同一页面一样。

我正在记录page_id和url，以确保我正在为disqus提供正确的网址。

当我从一个页面点击另一个页面时都有disqus时，控制台会发出一堆disqus错误：

DISQUS assertion failed: Unsafe attempt to redefine existing module: stringify [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: parse [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: domready [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: on [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: once [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: off [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: trigger [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: stopListening [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: listenTo [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: listenToOnce [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: bind [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: unbind [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: getShortnameFromUrl [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: getForum [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: isSSL [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: guessThreadTitle [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: getContrastYIQ [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: colorToHex [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: getElementStyle [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: getAnchorColor [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: normalizeFontValue [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: isSerif [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: getBrowserSupport [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: getPermalink [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: expose [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: BaseApp [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: WindowedApp [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: ThreadBoundApp [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: PublicInterfaceMixin [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: Switches [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: Profile [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: BackplaneIntegration [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: Lounge [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: Ignition [VM] embed.js (16737):1
DISQUS assertion failed: Unsafe attempt to redefine existing module: HostConfig 

Answer 1

将Disqus与Ember

集成

---

更新 - 现在有Ember Addon here。

---

我刚刚在ember博客框架（see source here）上整合了async Disqus，这就是我做到的：

首先，将选项设置为对象（所有组件都可以轻松访问）：

App.DisqusOptions = Em.Object.create({
  shortname: 'example', // Set this to your Disqus account's shortname
});

接下来，使用他们提供的代码加载disqus一次且仅加载一次。我在组件中做到了这一点：

App.DisqusCommentsComponent = Em.Component.extend({
  setupDisqus: function() {
    if (!window.DISQUS) {
      var disqusShortname = App.DisqusOptions.get('shortname');
      window.disqus_shortname = disqusShortname; // Mimic behaviour as if we're setting variable in a script tag

      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = '//' + disqusShortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    }
  }.on('didInsertElement'),
});

您还可以通过在运行disqusLoaded方法并对其进行检查后将options对象上的setupDisqus()属性设置为true来执行此操作。

此外，您可以使用script标记在您的应用程序模板中执行此操作，但如果您在没有的页面上加载脚本并且id元素，则会导致错误} #disqus_thread。

接下来，使用您要放在要显示评论的每个页面上的Em.View或Em.Component。我们称之为App.DisqusCommentsComponent。该组件将具有 no 布局（模板）。由于每次我们更改路线/帖子时都会加载此组件，因此它是调用DISQUS.reset()的理想位置。

App.DisqusCommentsComponent = Em.Component.extend({
  elementId: 'disqus_thread', // ID is used by Disqus to know where to load the comments
  timer: null,

  setupDisqus: function() {
    // setupDisqus() code left out for purposes of not repeating myself
  }.on('didInsertElement'),

  loadNewPostComments: function() {
    if (window.DISQUS) {
      this.reset();
    } else {
      // If DISQUS hasn't finished async loading yet, check again in 100 ms. Once it's loaded, the above this.reset() will be called.
      this.set('timer', Em.run.debounce(this, this.loadNewPostComments, 100));
    }
  },

  reset: function() {
    var controller = this.get('parentView.controller');
    var postIdentifier = controller.get('urlString');
    var postUrl = window.location.href;

    // Since this view has the elementId Disqus targets, we need to wait until after the view has finished rendering to call the reset function, which searches for #disqus_thread
    Em.run.scheduleOnce('afterRender', function() {
      window.DISQUS.reset({
        reload: true,
        config: function () {
          this.page.identifier = postIdentifier;
          this.page.url = postUrl;
        }
      });
    });
  },
});

N.B。变量postIdentifier是控制器上为每个博客帖子设置的属性，作为控制器的模型加载。您需要一种类似的方法来识别每条路线以跟踪评论。

瞧，瞧！每次用户将路由更改为在其模板中包含comments组件的路由时，都会进行异步调用。例如：

// Some random hbs here for your blog post
{{disqus-comments}}

Disqus JS配置变量

每当你设置一个像these这样的配置变量时，你都会想要在窗口上设置一个属性。例如：

var disqusShortname = App.DisqusOptions.get('shortname');
window.disqus_shortname = disqusShortname;

// Do stuff with disqusShortname here

旁注：评论计数

如果您想使用Disqus'评论计数功能，您可以采用与上述类似的方法。但是，您还需要使用以下内容重新打开{{link-to}}帮助程序调用的视图：

Em.LinkView.reopen({

  addDisqusTag: function() {
    var commentCount = this.get('commentCount');

    if (commentCount) {
      var isLinkToPost = this.get('isLinkToPost');
      var href = this.get('href');
      var disqusTag = '#disqus_thread';

      this.set('href', href + disqusTag);
    }
  }.on('willInsertElement'),
});

现在，如果您在模板中执行以下操作，它将返回commentCount：

{{#link-to 'post' this.urlString commentCount='true'}}{{/link-to}}

希望有所帮助。如果您有任何问题，请告诉我们！

Answer 2

我创建了一个有效的jsbin，看看。

至于我改变了什么，这条线错了一点

this.get('element').id = 'disqus_thread';

但也可以通过使用

在视图本身上定义elementId来省略

App.DisqusView = Ember.View.extend({
  tagName: 'div',
  elementId: 'disqus_thread',
  ...

然后用

检索

  var page_id = this.get('elementId');

为了测试它是否正常工作我已经在顶部的jsbin中添加了一个伪关于页面的链接，在about页面中你会找到一个返回索引页面的链接，切换回来虽然错误仍然存​​在，但我没有看到任何问题，每次都会按预期加载。这可能与Disqus如何注入DOM有关。如果它适合您，请查看并告诉我。

希望它有所帮助。

Answer 3

根据Disqus文档，您可以像这样重置活动线程：

DISQUS.reset({
  reload: true,
  config: function () {  
    this.page.identifier = "newidentifier";  
    this.page.url = "http://example.com/#!newthread";
  }
});

（来自http://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites）

Answer 4

使用：

• 组件
• didInsertElement（）

组件

App.CDisqusComponent = Em.Component.extend({
    didInsertElement: function () {
        var page_id = window.location.href,
            disqus_identifier = page_id,
            disqus_url = page_id,
            disqus_title = Em.$('title').text(),
            disqus_shortname = 'disqus shortname', // CHANGE, USE YOURS
            el_id = disqus_shortname + Date.now();

        this.set('page_id', el_id);

        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        dsq.id = el_id;
        (document.getElementsByTagName('head')[0] || 
         document.getElementsByTagName('body')[0]).appendChild(dsq);
    },
    willDestroyElement: function () {
        Em.$('#' +  this.get('page_id')).remove();
    }
})

组件模板

<div id="disqus_thread"></div>

现在您可以在任何模板中添加disqus：

{{c-disqus}}

分叉：https://gist.github.com/givanse/a3b945a47438d7119989