私は、モバイル デバイスの Web アプリを初めて使用します。今後のプロジェクトで使用するいくつかのライブラリを評価しており、jQuery Mobile、Sammy、および Require JS を選択しました。私はそれらをサンプルアプリに統合して慣れようとしていましたが、完全に捨てられました。
基本的にrequirejsを使用してモジュールをロードし、ユーザーをテンプレートにリダイレクトする基本的なことをしようとしています。驚いたことに、テンプレートが DOM に読み込まれていることがわかりましたが、jQuery スタイルが適用されていません。理由はわかりません。テンプレートを index.html であるスタート ページの本文に直接追加しようとしています。
div に追加しようとしましたが、jQuery モバイルは div をページにラップし、ネスト ページは jQuery モバイルでは使用できません。どんな助けでも大歓迎です。また、達成しようとしていることの概要を示すために、いくつかのコードを貼り付けています。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Project</title>
<link rel="stylesheet" href="styles/jquery.mobile-1.3.1.css"/>
<link rel="stylesheet" href="styles/style.css" />
<script type="text/javascript" src="js/require/require.js" data-main="js/common"></script>
</head>
<body>
</body>
</html>
AMD モジュール Common JS
require.config({
baseUrl: "js/",
paths: {
jquery: 'lib/jquery/jquery-1.10.1',
'jquery.mobile': 'lib/jquery/jquery.mobile-1.3.1',
'jquery.mobile.config': 'lib/jquery/jquery.mobile.config',
underscore: "lib/underscore/underscore",
ko: "lib/knockout/knockout.min",
postal: "lib/postal/postal",
amplify: "lib/amplify/amplify",
text: "require/text",
sammy: "lib/sammy/sammy",
'sammy.template':"lib/sammy/plugin/sammy.template",
router : "Router"
},
priority: ['jquery', 'jquery.mobile','jquery.mobile.config','sammy','sammy.template'],
shim: {
ko: {
exports: "ko"
},
underscore: {
exports: "_"
},
amplify: {
exports: "amplify"
},
'jquery.mobile': ['jquery','jquery.mobile.config'],
'sammy': { deps: ['jquery','jquery.mobile'], exports: 'Sammy' } ,
'sammy.template': { deps: ['sammy']},
'router': { deps: ['sammy.template']}
},
waitSeconds: 60
});
require(["jquery",'router',"jquery.mobile"],function($,Router,){
console.log('1');
//GlobalContext.initialize();
}) ;
私の router.js
define(['jquery','sammy','sammy.template'],function($,Sammy){
return Sammy( function() {
this.use('Template');
this.element_selector = 'body';
this.get('#/', function(context) {
context.app.swap('');
alert(context.$element());
context.render('view/hello.template')
.appendTo(context.$element());
})
.then(function(){
$('#main').trigger("create")
});
this.get('#/item', function(context) {
context.app.swap('');
context.render('view/page2.template')
.appendTo(context.$element());
});
}).run('#/');
});
ロードしようとしているテンプレートは、hello.template として保存されています
<script type="text/javascript">
require(["jquery","jquery.mobile"],function($){
console.log('2');
$('#myText').val('AAAA');
});
</script>
<div data-role="page">
<div data-role="header" data-theme="b" data-position="fixed">
<h1>Main Menu</h1>
</div>
<div data-role="content">
<input type = "text"
id = "myText"
value = "text here" />
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
ご意見をお寄せいただきありがとうございます