帶Facebook SDK的HotTowel SPA

我已經使用HotTowel SPA模板啓動了一個新的Visual Studio 2012 Express Web項目。我不確定我應該在HotTowel結構中加載Facebook SDK的代碼位置？帶Facebook SDK的HotTowel SPA

我試過main.js和shell.js，但我似乎無法得到sdk加載。 Facebook表示，把下面的代碼加載SDK異步

window.fbAsyncInit = function() { 
    // init the FB JS SDK 
    FB.init({ 
     appId: '577148235642429',      // App ID from the app dashboard 
     channelUrl: '//http://localhost:58585/channel.html', // Channel file for x-domain comms 
     status: true,         // Check Facebook Login status 
     xfbml: true         // Look for social plugins on the page 
    }); 

    // Additional initialization code such as adding Event Listeners goes here 
}; 

// Load the SDK asynchronously 
(function (d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) { return; } 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/all/debug.js"; 
    fjs.parentNode.insertBefore(js, fjs); 

}(document, 'script', 'facebook-jssdk'));

來源

2013-04-27 Kbalz

創建包含此代碼的文件名爲facebooksdk.js模塊。然後，在引導序列中「需要」代碼，如果您希望它立即加載。

來源

2013-04-28 05:35:49

約翰感謝你的迴應，從那以後我學到了很多東西。我現在的問題是在我的facebooksdk模塊中，我究竟返回了什麼？我要求的模塊，但獲取空引用，因爲該模塊不返回一個VM。 – Kbalz 2013-05-10 04:08:53

使用Durandal的Facebook SDK並不容易。

Facebook的優惠instructions如何使用require進行設置。但是聽起來像這種方法不是supported in Durandal。

我用vm支持淘汰賽，把全局的FB對象換成了我的髒版本。你可以很容易地使用它並綁定到任何屬性，如用戶名。

從shell.js包含該facebook.js以確保它在應用程序啓動時加載。

這裏是我的facebook.js：

define(['services/logger'], function (logger) { 
var vm = { 
    facebook: null, 
    initialized: ko.observable(false), 
    name: ko.observable(""), 
    picturesrc: ko.observable(""), 
    login: login, 
    logout: logout 
}; 

$.ajaxSetup({ cache: true }); 
$.getScript('//connect.facebook.net/en_UK/all.js', function() { 
    window.fbAsyncInit = function() { 
     vm.facebook = FB; 
     vm.facebook.init({ 
      appId: '160000000000499', 
      status: true, 
      cookie: true, 
      xfbml: true, 
      oauth: true 
     }); 
     vm.initialized(true); 
     vm.facebook.getLoginStatus(updateLoginStatus); 
     vm.facebook.Event.subscribe('auth.statusChange', updateLoginStatus); 
    }; 
});  
return vm; 

function login() { 
    vm.facebook.login(function(response) { 
     //Handled in auth.statusChange 
    } , { scope: 'email' }); 
} 

function logout() { 
    vm.facebook.logout(function (response) { 
     vm.picturesrc(""); 
     vm.name(""); 
    }); 
} 

function updateLoginStatus(response) { 
    if (response.authResponse) { 
     logger.log("Authenticated to Facebook succesfully"); 
     vm.facebook.api('/me', function (response2) { 
      vm.picturesrc('src="https://graph.facebook.com/' + 
       +response2.id + '/picture"'); 
      vm.name(response2.name); 

     }); 
    } else { 
     logger.log("Not authenticated to Facebook"); 
     vm.picturesrc(""); 
     vm.name(""); 
    } 
} 

});

我沒有測試過我的代碼正確。但至少在Chrome中登錄和提取名稱效果良好。

請記住更改appId並在developers.facebook.com上更新適當的域。

來源

2013-05-28 14:01:37

帶Facebook SDK的HotTowel SPA

回答

相關問題