使用jQuery Mobile應用程序需要JS和薩米

我非常新的移動設備的網絡應用程序。我正在評估幾個我將用於即將開展的項目的圖書館，並選擇了jQuery Mobile，Sammy和Require JS。我試圖將它們整合到示例應用程序中以便熟悉，並且我完全被拋棄了。使用jQuery Mobile應用程序需要JS和薩米

我試圖做的基本上都是使用加載和requirejs將用戶重定向到一個模板模塊基本的東西。令我驚訝的是，我看到模板正在加載到DOM，但jQuery樣式從未應用，我不知道是什麼原因。我試圖將模板直接附加到我的起始頁的index.html正文。

我試圖將其追加在格但jQuery Mobile的包裹格成一個頁面，嵌套頁面是不是在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模塊的通用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>

預先感謝任何輸入

來源

2013-06-24 user2514435

請嘗試採用以下2個變化：

添加id屬性您div頁面模板中：

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

後應用模板請確保您執行：

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

替換此行：

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

有：

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

既然你創建動態的頁面，你必須以應用jQuery Mobile的樣式手動觸發pagecreate事件。

我希望這會有所幫助。

來源

2013-06-24 18:28:54

Tolis感謝您的答覆，我試過你的解決方案，但不幸的是它仍然無法正常工作。謝謝 – user2514435

當您觸發頁面創建時，'container'元素必須存在。你可以添加一個'console.log（$（'＃container'）。length）;'並檢查它是否存在（它不應該是0）？ –

我已經更新了我的答案。你可以驗證jQuery Mobile js在router.js之前加載嗎？ –

我發現這個問題，這是因爲我使用（我用的是最新版本）requirejs的版本出現。我切換到舊版本，現在問題似乎已經消失

來源

2013-06-25 17:30:48 user2514435

使用jQuery Mobile應用程序需要JS和薩米

回答

相關問題