1
저는 모바일 장치의 웹 앱을 처음 사용합니다. 내가 곧 내 프로젝트에 사용할 라이브러리 몇 개를 평가 중이며 jQuery Mobile, Sammy 및 Require JS를 선택했습니다. 나는 샘플 애플 리케이션에 익숙해지기 위해 그들을 통합하려고 노력하고 있었고 나는 완전히 버려졌습니다.JS 및 Sammy가 필요한 Jquery 모바일 애플리케이션
기본적으로 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 모듈 공통 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>
감사
답변을 주셔서 감사합니다. 귀하의 솔루션을 사용해 보았지만 불행히도 여전히 작동하지 않습니다. 감사합니다. – user2514435
'컨테이너'요소는 페이지 생성을 트리거 할 때 존재해야합니다. 'console.log ($ ('# container'). 길이);'를 추가하고 그것이 존재하는지 (0이 아니어야 함) 점검 할 수 있습니까? –
답변을 업데이트했습니다. router.js 전에 jQuery Mobile js가로드되었는지 확인할 수 있습니까? –