2013-02-26 28 views
3

我已經開發了一個使用骨幹網的手機應用程序,需要js。 jquery mobile js從主js加載。無法在phonegap +骨幹應用中渲染jquery移動樣式

據我所知,要求js會爲我加載所有的js。所以我沒有必須手動加載它們使用<script>在我的index.html

我不期待什麼?是否有一個特定的方法來加載手機+骨幹網中的jqm 我已經在這裏加載了jqueryMobile庫。

require.config({ 
    paths: { 
     "jquery": "libs/jquery", 
     "jquerymobile": "libs/jquerymobile", 
     "underscore": "libs/lodash", 
     "backbone": "libs/backbone" 
    }, 
    shim: { 

     "backbone": { 
       "deps": [ "underscore", "jquery" ], 
       "exports": "Backbone" //attaches "Backbone" to the window object 
     } 
    }}); 
require([ "jquery", "backbone", "routers/mobileRouter" ], function($, Backbone, Mobile) { 
$(document).on("mobileinit", 
    function() { 
     $.mobile.linkBindingEnabled = false; 
     $.mobile.hashListeningEnabled = false; 
    } 
) 
require([ "jquerymobile" ], function() { 
    this.router = new Mobile(); 
}); }); 

這是我的index.html head。由於我最初加載了我的移動js,因此我不需要我的標題中的樣式的jqm腳本。

<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
<title>RideSmart App</title> 
<script src="js/libs/require.js" data-main="js/mobile"></script> 
<link rel="stylesheet" href="css/jqm1.3.0.min.css" /> 
<script type="text/javascript" charset="utf-8" src="jsLib/phonegap.js"></script> 
</head> 
+1

問題是什麼? – 2013-02-26 13:00:22

回答

1

我認爲你需要觸發網頁上的某'create'事件骨幹已經呈現後,作爲「加強新的標記」的文檔here的部分建議。

但是,如果通過 的Ajax生成的內容的新標記的客戶端或負載,並將其注入到一個頁面,你可以觸發創建事件 處理自動初始化包含在 的所有插件新的標記。這可以在任何元素上觸發(即使是div本身),爲您節省了手動初始化每個插件 (列表視圖按鈕,選擇等)的任務。

$(...new markup that contains widgets...).appendTo(".ui-page").trigger("create"); 

如果您使用Marionette可以覆蓋onRender鉤它能夠自動做到這一點。類似這樣的:

// Override Marionette onRender and onShow events so JQM 'create' event is 
// triggered on view's element. This ensures dynamically created content 
// is given the jQuery Mobile treatment 
Marionette.View.prototype.onRender = Marionette.View.prototype.onShow = function() { 
    this.$el.trigger('create'); 
    return this; 
};