DisureusをAureliaアプリに統合する方法は？

Question

Disureusを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

：

// 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をリセットする準備ができたら、もう一度作成します。

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

：私たちは私たちのブログの記事をロードしているところ

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

最後には、私たちはビューでディスカスタグを配置します。

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

はその後、我々はディスカスのカスタム要素を作成します