带Facebook SDK的HotTowel SPA

Question

我已经使用HotTowel SPA模板启动了一个新的Visual Studio2012Express Web项目。我不确定我应该把加载HotTowel结构中的Facebook SDK的代码放在哪里？

我试过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'));

Answer 1

在名为facebooksdk.js的文件中创建一个模块，该文件包含以下代码。然后“要求”引导序列中的代码，如果您希望它立即加载。

Answer 2

在Durandal中使用Facebook SDK并不容易。

Facebook向instructions提供了如何使用require来设置它。但听起来这种方法并不是supported in Durandal。

我通过使用支持knockout的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中登录和获取名称工作得很好。

请记住，在developers.facebook.com上更改appId并更新正确的域。