Question

我使用HotTowel SPA模板启动了一个新的Visual Studio 2012 Express 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

使用Facebook SDK与Durandal并不容易。

Facebook提供instructions如何使用require进行设置。但听起来像那种方法不是supported in Durandal。

我通过使用vm支持knockout包装全局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并更新正确的域。

使用Facebook SDK的HotTowel SPA

2 个答案: