Question

我对移动设备中的网络应用很陌生。我正在评估我将用于即将到来的项目的几个库，我选择了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();


}) ;

我的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>

提前感谢任何输入

Answer 1

请尝试应用以下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样式。

我希望这会有所帮助。

Answer 2

我发现了这个问题，因为我正在使用的requirejs版本（我使用的是最新版本）。我切换到旧版本，现在问题似乎消失了

使用Require JS和Sammy的Jquery Mobile应用程序

2 个答案: