所以我正在尝试使用 Durandal 构建一个移动应用程序。但是，我在使用 Google plus JS API 集成时遇到了麻烦。我认为这是问题所在：gapi 的 javascript 客户端带有异步加载，因此 durandal 初始化会在 gapi 未定义的情况下崩溃，因此，css 组件也无法正确呈现。我已经尝试将以下脚本标签放在我的 login.js 视图的 login.html 文件中，甚至放在我的 main.js 的 require.js 部分中，但它仍然无法正常工作。用于链接到 Google Api 的脚本：
<script src="https://apis.google.com/js/client:platform.js" async defer> </script>
<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>
//onSignInCallBack function to call in login.js after user signs in vis Google Plus
onSignInCallback: function(authResult) {
gapi.client.load('plus','v1').then(function() {
if (authResult['access_token']) {
$('#authOps').show('slow');
$('#gConnect').hide();
var user_access_token = authResult['access_token'];
var id_token = authResult['id_token'];
} else if (authResult['error']) {
// There was an error, which means the user is not signed in.
console.log('There was an error: ' + authResult['error']);
$('#authOps').hide('slow');
$('#gConnect').show();
}
console.log('authResult', authResult);
});
},
这是我的 main.js 文件：
requirejs.config({
paths: {
'text': '../Scripts/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
'transitions': '../Scripts/durandal/transitions',
'knockout' : '../Scripts/knockout-3.1.0',
'bootstrap': '../Scripts/bootstrap',
'jquery':'../Scripts/jquery-1.9.1',
'async':'../Scripts/async'
}
});
define(['durandal/system',
'durandal/app',
'durandal/viewLocator',
'durandal/binder',
'utils/routines',
'async!https://apis.google.com/js/platform.js?onload=onLoadCallback',
'async!https://apis.google.com/js/client:platform.js'
], function (system, app, viewLocator, binder,routines,callback,gapi) {
//>>excludeStart("build", true);
system.debug(true);
//>>excludeEnd("build");
app.configurePlugins({
router: true,
dialog: true,
widget: true
});
app.start().then(function() {
//Replace 'viewmodels' in the moduleId with 'views' to locate the view.
//Look for partial views in a 'views' folder in the root.
viewLocator.useConvention();
//Show the app by setting the root view model for our application with a transition.
app.setRoot('shell/shell', 'entrance');
// override bad route behavior to write to
// console log and show error toast
/*
router.handleInvalidRoute = function (route, params) {
logger.logError('No route found', route, 'main', true);
};
*/
});
});
这是我的 index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-startup-image" href="/Content/images/ios-startup-image- landscape.png" media="(orientation:landscape)" />
<link rel="apple-touch-startup-image" href="/Content/images/ios-startup-image-portrait.png" media="(orientation:portrait)" />
<link rel="apple-touch-icon" href="~/Content/images/icon.png" />
<link href="/Content/ie10mobile.css" rel="stylesheet" />
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/font-awesome.min.css" rel="stylesheet" />
<link href="/Content/durandal.css" rel="stylesheet" />
<link href="/Content/starterkit.css" rel="stylesheet" />
<script type="text/javascript">
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
var mq = "@@-ms-viewport{width:auto!important}";
msViewportStyle.appendChild(document.createTextNode(mq));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
</script>
</head>
<body>
<div id="applicationHost">
<div class="text-center">
<br/><br/><br/><br/>
<i class="fa fa-spinner fa-spin"></i>
<div class="message">
Loading....
</div>
</div>
</div>
<script type="text/javascript" src="Scripts/require.js" data-main="/App/main"></script>
</body>
</html>
有没有人尝试过将 google plus 登录与 Durandal 集成并遇到同样的问题？非常感谢帮助和建议！