【发布时间】：2013-06-21 04:08:21
【问题描述】：
我对移动设备中的网络应用非常陌生。我正在评估我将用于即将进行的项目的几个库，我选择了 jQuery Mobile、Sammy 和 Require JS。我试图将它们集成到一个示例应用程序中以熟悉它们，但我完全被抛弃了。
我正在尝试做一些基本的事情，基本上是使用 requirejs 加载模块并将用户重定向到模板。令我惊讶的是，我看到模板正在加载到 DOM，但从未应用 jQuery 样式我不知道是什么原因。我正在尝试将模板直接附加到我的起始页的主体，即 index.html。
我试图将它附加到 div 中，但 jQuery mobile 将 div 包装到一个页面中，并且嵌套页面在 jQuery mobile 中不可用。任何帮助将不胜感激。我还粘贴了一些代码来给出我想要实现的高级想法。
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();
}) ;
我的路由器.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>
提前感谢您的任何意见
【问题讨论】：
标签： jquery-mobile requirejs sammy.js