How to Integrate Disqus into an Aurelia app? -

how integrate disqus aurelia app? tried doing this:

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 unique post identifier. e.g. http://example.com/#/blog/my-post-title       this.post = // post retrieved firebase , rendered in 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;       }     });   } } 

this loads correct blog post , manages load disqus, same disqus comment section loaded each individual blog post.

i managed integrate disqus aurelia app doing following:

// index.html: <script>   (function () {     var dsq = document.createelement('div');     dsq.setattribute('id', 'disqus_thread');     dsq.style.display = 'none';        (document.head || document.body).appendchild(dsq);      // script below looks div id disqus_thread when runs.     // creating div above, prevent 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> 

next, remove div created. create again when ready reset disqus each individual blog post.

// app.js export class app {   ...   attached() {     let dsq = document.getelementbyid('disqus_thread');     dsq.parentnode.removechild(dsq);   } } 

then create disqus custom element:

// disqus.html <template>   <div id="disqus_thread"></div> </template>  // disqus.js import {bindable, customelement} 'aurelia-framework';  @customelement('disqus') export class disqus {    @bindable post;    bind(bindingcontext) {     // making sure parent view-model exposes object contains information     // needed disqus.     // trigger function below.     this.post = bindingcontext.post;   }    // conventional method gets called when bindable property post changes.   postchanged(newpost, oldpost) { // oldpost null in case     disqus.reset({       reload: true,       config: function() {         this.page.identifier = newpost.identifier;         // reason, urls # don't work 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;       }     });   } } 

lastly, place disqus tag in view we're loading our blog post:

// post.html <template>   <require from="path-to-custom-element/disqus"></require>   ...   // view-model view should expose object contains    // blog post information required disqus. custom element should   // access view's binding context, shown above.   <disqus></disqus> </template>