JQuery Mobile と EmberJS を使用して小さなモバイル アプリを構築しようとしています。これは実際には Rhodes アプリケーション (Rhomobile) です。
これは私のLayout.erbです：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Todo</title>
<!-- Ember Libraries -->
<script src="/public/js/libs/handlebars-1.0.0.js"></script>
<script src="/public/js/libs/ember.js"></script>
<script src="/public/js/libs/ember-data.js"></script>
<!-- Ember Application -->
<script src="/public/js/application.js"></script>
<script src="/public/js/router.js"></script>
<script src="/public/js/models/todo.js"></script>
<script src="/public/js/controllers/todos_controller.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.loadingMessage = false;
$.mobile.loadingMessageDelay = 300; // in ms
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
$.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.loadingMessageDelay = 50; // in ms
});
</script>
<link rel="stylesheet" href="/public/jqmobile/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="/public/css/jqmobile-patch.css">
<script src="/public/jqmobile/jquery.mobile-1.3.1.min.js"></script>
<script src="/public/js/jqmobile-patch.js"></script>
</head>
<body data-platform="<%= Rho::System.getProperty('platform') %>">
<%= @content %>
</body>
</html>
ご覧のとおり、Ajax と PushState などを無効にしました。これは私の index.erb です:
<script type="text/x-handlebars" data-template-name="todos">
<div data-role="page">
//My Template
</div>
</script>
今試してみると、空白の灰色のページが表示されます。ただし、コンソールまたは Ember-Console (Chrome の拡張機能) ではエラーは発生しません。ビューとコントローラーも適切に検出します。
次に、JqueryMobile CSS ファイルにコメントを付けてみると、ページの高さに相当する「読み込み中」メッセージの空白スペースが表示され、下にアプリケーションが表示され、正常に動作します。JqueryMobile JS を削除すると、内容は取得できますが、スタイルが設定されていません。
何が問題ですか？