6

私は ember-1.0.0-rc.5 を実行しており、記事 ID を渡す disqus コメントのビューを作成しました。

私の問題は、あるページから別のページにいつ切り替えるかを 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 がすべて同じページであると認識しているかのように、1 つのコメントがすべてのページに残ります。

disqus に正しい URL を指定していることを確認するために、page_id と URL をログに記録しています。

また、両方に 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
4

4 に答える 4

2

Disqus と Ember の統合

更新-ここに Ember アドオンがあります。

非同期の Disqus を ember ブログ フレームワークに統合したところです (ソースはこちらを参照)。

まず、オプションをオブジェクトとして設定します (すべてのコンポーネントから簡単にアクセスできます)。

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

次に、提供されたコードを使用して、disqus を 1 回だけロードします。コンポーネントでこれを行いました：

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た後、オプション オブジェクトのプロパティを true に設定することで、これを行うこともできます。setupDisqus()

また、タグを使用してアプリケーション テンプレートでこれを行うこともできますが、 ofscriptを持つ and 要素を持たないページにスクリプトをロードすると、エラーが発生します。id#disqus_thread

次に、コメントを表示する各ページに配置するEm.ViewまたはEm.Componentを使用します。と呼びましょうApp.DisqusCommentsComponent。このコンポーネントにはレイアウト (テンプレート)がありません。このコンポーネントはルート/ポストを変更するたびに読み込まれるため、呼び出すのに最適な場所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;
        }
      });
    });
  },
});

注: 変数postIdentifierは、コントローラーのモデルとして読み込まれる、ブログ投稿ごとにコントローラーに設定されるプロパティです。コメントを追跡するために、各ルートを識別する同様の方法が必要になります。

ほら、ほら！ユーザーがルートをテンプレートにコメント コンポーネントを持つルートに変更するたびに、非同期呼び出しが行われます。例えば：

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

Disqus JS 構成変数

これらのような構成変数を設定するときはいつでも、それらをウィンドウのプロパティに設定する必要があります。例えば：

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

それが役立つことを願っています。ご不明な点がございましたら、お気軽にお問い合わせください。

于 2014-05-11T22:15:14.767 に答える
1

使用する：

  • コンポーネント
  • 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

于 2014-06-12T16:34:22.923 に答える
1

動作する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 ページへのリンクを配置しました。about ページには、インデックス ページに戻るリンクがあり、前後に切り替えられます。問題はありません。エラーがまだ表示されますが、Disqus は期待どおりに毎回読み込まれます。これは、Disqus が DOM に注入される方法に関連している可能性があります。ご覧になり、それがあなたのために働いているかどうか教えてください。

それが役に立てば幸い。

于 2013-07-13T22:11:54.197 に答える
1

Disqus docs によると、次のようにアクティブなスレッドをリセットできます。

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より)

于 2013-09-01T10:10:58.437 に答える