aurelia - 如何将 Disqus 集成到 Aurelia 应用程序中？

Question

您将如何正确地将 Disqus 集成到 Aurelia 应用程序中？我试着做这样的事情:

index.html

  ...
  <script src="http://example.disqus.com/embed.js"></script>
</head>

post.html

    ...
    <div id="disqus_thread"></div>
  </article>
</template>

post.js

export class Post {

  activate(params, routeConfig) {
      // params contains the unique post identifier. e.g. http://example.com/#/blog/my-post-title
      this.post = // Post is retrieved from Firebase and rendered in the view
  }

  attached() {
    DISQUS.reset({
      reload: true,
      config: function () {
        this.page.identifier = this.post.subdirectory;
        this.page.url = "http://example.com/" + this.post.subdirectory;
        this.page.title = this.post.title;
      }
    });
  }
}

这加载了正确的博客文章，它甚至设法加载了 Disqus，但是为每个单独的博客文章加载了相同的 Disqus 评论部分。

Answer 1

我通过执行以下操作将 Disqus 集成到我的 aurelia 应用程序中:

// index.html:
<script>
  (function () {
    var dsq = document.createElement('div');
    dsq.setAttribute('id', 'disqus_thread');
    dsq.style.display = 'none';   
    (document.head || document.body).appendChild(dsq);

    // The script below looks for a div with id disqus_thread when it runs.
    // By creating the div above, we prevent the following error: 
    // Uncaught TypeError: Cannot read property 'appendChild' of null
    var s = document.createElement('script');
    s.src = '//example.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (document.head || document.body).appendChild(s);
  })();
</script>

接下来，我们删除刚刚创建的 div。当我们准备好为每篇博客文章重置 Disqus 时，我们将再次创建它。

// app.js
export class App {
  ...
  attached() {
    let dsq = document.getElementById('disqus_thread');
    dsq.parentNode.removeChild(dsq);
  }
}

然后我们创建一个disqus自定义元素:

// disqus.html
<template>
  <div id="disqus_thread"></div>
</template>

// disqus.js
import {bindable, customElement} from 'aurelia-framework';

@customElement('disqus')
export class Disqus {

  @bindable post;

  bind(bindingContext) {
    // Making sure the parent view-model exposes an object that contains the information
    // needed by Disqus.
    // This will trigger the function below.
    this.post = bindingContext.post;
  }

  // Conventional method that gets called when the bindable property post changes.
  postChanged(newPost, oldPost) { // oldPost is null in this case
    DISQUS.reset({
      reload: true,
      config: function() {
        this.page.identifier = newPost.identifier;
        // For some reason, urls with # don't work with Disqus.
        // Working url: http://example.com/blog/example-post
        // Non working url: http://example.com/#/blog/example-post
        this.page.url = 'http://example.com' + newPost.subdirectory;
        this.page.title = newPost.title;
      }
    });
  }
}

最后，我们将 Disqus 标签放在我们正在加载博客文章的 View 中:

// post.html
<template>
  <require from="path-to-custom-element/disqus"></require>
  ...
  // The view-model for this view should expose an object that contains 
  // the blog post information required by Disqus. The custom element should get
  // access to this view's binding context, as shown above.
  <disqus></disqus>
</template>