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>

到路由器中的视图调用的模板之一，注释（或类似/发送）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 API结果的页面的路线中进行你的路由器内的Facebook通话。

如果要在每个页面上显示某些内容 - 例如用户名/配置文件pic考虑将代码放在单独的函数中，例如initUserInfoView（），然后从要显示信息的每个路由中调用它。

说实话，这些东西实际上属于你的视图 - 路由器应该初始化并渲染视图，视图负责从Facebook获取并显示

Answer 2

我在@ reach4thelasers的帮助下解决了这个问题我创建了一个从Facebook加载评论的CommentsView，我在每个需要评论的视图中调用它。我只需在CommentsView的FB.init函数中调用initialize 所以代码看起来像这样：

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

Facebook评论不会出现在Backbonejs视图中

2 个答案: