Jquery mobile Jquery移动应用程序需要JS和Sammy_Jquery Mobile_Requirejs_Sammy.js

Jquery mobile Jquery移动应用程序需要JS和Sammy

jquery-mobile requirejs

Jquery mobile Jquery移动应用程序需要JS和Sammy,jquery-mobile,requirejs,sammy.js,Jquery Mobile,Requirejs,Sammy.js,我对移动设备中的网络应用相当陌生。我正在评估两个库，它们将用于我即将到来的项目，我选择了jquerymobile、Sammy和requirejs。我试图将它们集成到一个示例应用程序中以熟悉它们，我完全被甩了我正在尝试做一些基本的工作，基本上是使用requirejs加载模块，并将用户重定向到模板。令我惊讶的是，我看到模板正在加载到DOM中，但jQuery样式从未应用过，我不知道原因是什么。我正试图将模板直接附加到我的起始页index.html的正文中我试图将其附加到div中，但jquerymo

我对移动设备中的网络应用相当陌生。我正在评估两个库，它们将用于我即将到来的项目，我选择了jquerymobile、Sammy和requirejs。我试图将它们集成到一个示例应用程序中以熟悉它们，我完全被甩了

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

我试图将其附加到div中，但jquerymobile将div包装到页面中，而嵌套页面在jquerymobile中不可用。任何帮助都将不胜感激。我还粘贴了一些代码，以提供我试图实现的高级概念

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>

我的路由器.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”，“jquery.mobile”]，函数（$）{
console.log（'2'）；
$（'#myText'）.val（'AAAA'）；
});
主菜单







页脚

提前感谢您的任何输入

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

将

id

属性添加到模板内的页面

div

：

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

替换此行：

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

与：

由于您是动态创建页面的，因此必须手动触发

pagecreate

事件才能应用JQuery Mobile样式

我希望这能有所帮助。

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

Tolis感谢您的回复我尝试了您的解决方案，但不幸的是，它仍然不起作用。感谢触发页面创建时，容器元素必须存在。能否添加

console.log（$（'#container'）.length）

并检查它是否存在（不应为0）？我已更新了答案。你能确认jquerymobilejs是在router.js之前加载的吗？我是这么做的，但运气不好。虽然我注意到console.log（$（'#container'）.length）值对我来说总是0。虽然我可以看到模板已经添加到DOM中，但您是否看到DOM中的页面

id=“container”

？长度值0表示在触发

pagecreate

时，DOM中不存在该元素。因此，不应用jQM样式是正常的。执行

$（“#container”）.trigger（'pagecreate'）应用模板后。
$("#container").trigger('pagecreate');

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

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