Facebook的評論不會出現在Backbonejs視圖

Question

我正在使用Backbonejs爲我的應用程序，我試圖添加Facebook評論和喜歡/發送按鈕我的一些意見。我在實例化Router對象之前實例化JavaScript SDK，如下所示：

// main.js 
require([ "Router" ], function (Router) { 

// Facebook authentication 
// Load the SDK Asynchronously 
    (function(d){ 
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; 
    if (d.getElementById(id)) {return;} 
    js = d.createElement('script'); js.id = id; js.async = true; 
    js.src = "//connect.facebook.net/en_US/all.js"; 
    ref.parentNode.insertBefore(js, ref); 
    }(document)); 

    // Init the SDK upon load 
    window.fbAsyncInit = function() { 
    FB.init({ 
     appId  : '302210766529054', // App ID 
     channelUrl : '//'+window.location.hostname+'/channel', // Path to your Channel File 
     status  : true, // check login status 
     cookie  : true, // enable cookies to allow the server to access the session 
     xfbml  : true // parse XFBML 
    }); 

    // If the user has auth'd the app, instantiate the router object. 
    FB.Event.subscribe('auth.statusChange', function(response) { 
      if (response.authResponse) { 
       // user has auth'd your app and is logged into Facebook 
       FB.api('/me', function(me){ 
        if (me.username) { 
         window.currentUser = me; 
         $('#username').html(window.currentUser.name); 
         new Router(); 
         Backbone.history.start(); 
        } 
       }); 
      } 
    }); 

} 

}）;

我可以很容易地在路由器調用的任何視圖中使用windows.currentUser變量。然而，當我加

<div class="fb-comments" data-href="http://mywebsite/i/#items/" data-num-posts="2" data-width="470"></div> 

一個通過在路由器中的視圖稱爲模板，註釋（也不是像/發送）格不會出現。當我將它添加到index.html文件的靜態元素之一時，它工作正常。

我在這裏錯過了什麼嗎？

編輯

這裏是我的路由器和視圖代碼，因爲它是在我發佈問題。

router.js 
define(
[ 
'models/song', 
'models/user', 
'models/spotlight', 
'models/user-playlist', 
'views/spotlight-view', 
'views/playlist-view', 
'views/single-playlist-view', 
], 
function(Song, User, SpotlightModel,UserPlaylist, SpotlightView, PlaylistView, SinglePlaylistView){ 
    return Backbone.Router.extend({ 
     initialize: function(){ 
      window.songQue = new Array(); 

     }, 
     routes:{ 
      '': 'index', 
      'spotlight': 'index', 
      'playlists': 'allPlaylist', 
      'playlists/:id':'onePlaylist', 
     }, 

     index: function(){ 
      var spotlight = new SpotlightModel({id:1}); 
      var spotlightView = new SpotlightView({spotlight: spotlight}); 
      spotlight.fetch(); 
      $('.content').html(spotlightView.el); 
     }, 

     allPlaylist: function(){ 
      $('.content').html(''); 
      var user = new User({id:window.currentUser.id}); 
      /* 
      * once user details are fetched from the server, 
      * loop through the arrays of their playlists and 
      * render them in the template. 
      */ 

      user.bind('change', function(){ 
       console.log(this); 
       for(var i=0; i<this.get('objects')[0].playlists.length; i++){ 
       var playlistView = new PlaylistView({ 
        playlist: user.get('objects')[0].playlists[i], 
        user: this.get('objects')[0] 
       }); 
       $('.content').prepend(playlistView.el); 
      } 

      }); 
     }, 

     onePlaylist: function(playlist_id){ 
      var userPlaylist = new UserPlaylist({id:playlist_id}); 
      var singlePlaylistView = new SinglePlaylistView({playlist: userPlaylist}); 
      $('.content').html(singlePlaylistView.el); 

     } 
    }); 
} 
    ); 



// single-playlist-view.js 
define(
[ 
    'text!templates/single-playlist/single-playlist.html', 
    'text!templates/single-playlist/single-playlist-details.html', 
    'text!templates/playlist/song-row.html', 
], 
function(SinglePlaylistTemplate, SinglePlaylistDetailsTemplate, SongRowTemplate){ 
    return Backbone.View.extend({ 

     initialize:function(options){ 

      this.playlistTemplate = _.template(SinglePlaylistTemplate); 
      this.playlistDetailsTemplate = _.template(SinglePlaylistDetailsTemplate); 
      this.songRowTemplate = _.template(SongRowTemplate); 
      this.playlist = options.playlist; 

      $(this.el).prepend(this.playlistTemplate); 
      this.playlist.bind('change', this.render, this); 
      this.playlist.fetch(); 


     }, 

     render:function(){ 
      this.renderSongs(); 
      this.renderDetails(); 

     }, 

     renderSongs: function(){ 
      // Put the size of songs in a variable 
      var size = this.playlist.get('objects')[0].songs.length; 
      // Extra loop just for the sake of filling the page. 
      for(var j=0; j<5; j++){ 
       for(var i=0; i<size; i++){ 

       this.$("#song-row").prepend(this.songRowTemplate({ 
        song: this.playlist.get('objects')[0].songs[i] 
       })); 
      } 
      } 
     }, 

     renderDetails: function(){ 
      this.$('.single-playlist-details').prepend(this.playlistDetailsTemplate({ 
       playlist: this.playlist, 
       thumbnail: this.playlist.get('objects')[0].songs[0].song_thumbnail, 
       total:this.playlist.get('objects')[0].songs.length, 
      })); 
     } 

    }); 
} 
); 

Answer 1

骨幹視圖將在Facebook API調用後呈現 - 在您調用Facebook的元素不存在的階段。

你真的想在你的路由器的Facebook調用路由器中顯示你想要顯示facebook API結果的頁面。

如果您想要在每個頁面上顯示某些內容 - 例如用戶名/配置文件圖片考慮把代碼放在一個單獨的函數中，例如initUserInfoView（），然後從你想要顯示信息的每條路線調用它。

說實話這個東西實際上是在您的視圖屬於 - 路由器應該初始化並渲染視圖，該視圖是負責從Facebook獲取和顯示

Answer 2

我解決了這個與@ reach4thelasers的幫助 我創建了一個加載來自Facebook的評論的評論視圖，並且我在每個需要評論的視圖中調用它。我簡單地調用在CommentsView 的initialize功能FB.init因此，代碼看起來是這樣的：

initialize: function(){ 
      FB.init({ 
        appId  : 'APP_ID', // App ID 
        channelUrl : '//'+window.location.hostname+'/channel', // Path to your Channel File 
        status  : true, // check login status 
        cookie  : true, // enable cookies to allow the server to access the session 
        xfbml  : true // parse XFBML 
      }); 

      this.commentsTemplate = _.template(CommentsTemplate); 
       $(this.el).html(this.commentsTemplate({ 
        comments_url: window.location.href 
       })); 
     }