1

我对移动设备中的网络应用程序很陌生。我正在评估我将用于我即将进行的项目的几个库，我选择了 jQuery Mobile、Sammy 和 Require JS。我试图将它们集成到一个示例应用程序中以熟悉它们，但我完全被抛弃了。

我正在尝试做一个基本的东西，基本上使用 requirejs 加载模块并将用户重定向到模板。令我惊讶的是，我看到模板正在加载到 DOM 但从未应用 jQuery 样式我不知道是什么原因。我正在尝试将模板直接附加到我的起始页的主体，即 index.html。

我试图将它附加到 div 中，但是 jQuery mobile 将 div 包装到一个页面中，并且嵌套页面在 jQuery mobile 中不可用。任何帮助将不胜感激。我还粘贴了一些代码来给出我想要实现的高级想法。

索引.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>

提前感谢您的任何输入

4

2 回答 2

0

I found the issue and it was occurring because of the version of requirejs i was using (I was using the latest version). I switched to an older version and now the problem seems to be gone

于 2013-06-25T17:30:48.233 回答
0

请尝试应用以下 2 项更改：

在模板内的页面中添加一个id属性：div

<div id="container" data-role="page">

并在应用您的模板后确保您执行：

$("#container").trigger('pagecreate');

替换这一行：

require(["jquery",'router',"jquery.mobile"]

和：

require(["jquery","jquery.mobile","router"]

由于您是动态创建页面，因此您必须手动触发pagecreate事件才能应用 JQuery Mobile 样式。

我希望这有帮助。

于 2013-06-24T18:28:54.363 回答