如何将Discus集成到Aurelia应用程序中？

您如何将Discus正确集成到Aurelia应用程序中？我试过这样做：

index.html

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

---

这将加载正确的博客文章，甚至可以加载Discus，但每个博客文章都会加载相同的Discus评论部分。

我通过以下操作将Discus集成到我的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>

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

然后我们创建一个disks自定义元素：

// 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;
      }
    });
  }
}

//discus.html
//硕士
从“aurelia框架”导入{bindable，customElement}；
@customElement（'discs'）
出口级论文{
@可装订岗位；
绑定（绑定上下文）{
//确保父视图模型公开包含信息的对象
//这是我们需要的。
//这将触发下面的功能。
this.post=bindingContext.post；
}
//当可绑定属性post更改时调用的常规方法。
postChanged（newPost，oldPost）{//oldPost在本例中为空
重设({
是的，
config:function（）{
this.page.identifier=newPost.identifier；
//出于某种原因，带有#的URL不适用于disqs。
//工作url:http://example.com/blog/example-post
//非工作url:http://example.com/#/blog/example-职位
this.page.url=http://example.com'+newPost.subdirectory；
this.page.title=newPost.title；
}
});
}
}

最后，我们将disqs标记放在加载博客文章的视图中：

// 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>

//post.html
...
//此视图的视图模型应公开包含
//Discus要求的博客帖子信息。自定义元素应该
//访问此视图的绑定上下文，如上所示。

// 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;
      }
    });
  }
}

// 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>