アプリにBackbonejsを使用していて、Facebookのコメントやいいね/送信ボタンを一部のビューに追加しようとしています。次のように、Routerオブジェクトをインスタンス化する前にJavaScriptSDKをインスタンス化しています。
// 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>
ルータのビューによって呼び出されたテンプレートの1つに対して、コメント（またはlike / send）divは表示されません。index.htmlファイルの静的要素の1つに追加すると、正常に機能します。
ここに何か足りないものがありますか？
編集
これが私のルーターで、質問を投稿する前のコードを表示します。
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,
}));
}
});
}
);