jQuery移動小部件無法在require.js /骨幹框架中呈現

Question

使用phonegap/requirejs/backbone構建移動應用程序。

這裏是視圖文件：

define(['jquery','backbone',"text!templates/summary.tpl",'handlebars','jquery.mobile'],function($,Backbone,Template,Handlebars){ 

//now create a backbone view 
var SummaryView = Backbone.View.extend({ 
el: $('#mcontent'), // attaches `this.el` to an existing element. 

events:{ 
    'pageinit':'', 
}, 

//initialize template 
template:Handlebars.compile(Template), 

initialize: function(){  
    _.bindAll(this, 'render'); // fixes loss of context for 'this' within methods     
    this.render(); 
}, 

render: function(){ 
    this.fill_body(); 
    this.footer(); 
    $('body').show();  
}, 

fill_body: function(){ 
    this.$el.append(this.template()); 
    return this; 
}, 


footer: function(){ 
    this.$el.append('<div data-role="footer"><h4>Footer content</h4></div>'); 
    return this; 
} 


}); 

和requirejs主文件：

require.config({ 
    paths:{ 
    jquery:'vendor/jquery/jquery.min', 
    'jquery.mobile':'vendor/jquery.mobile-1.3.1.min', 
    'jquery.mobile-config':'jqm-config', 
    underscore:'vendor/underscore/underscore-min', 
    backbone:'vendor/backbone/backbone-min', 
    handlebars:'vendor/handlebars/handlebars', 
    text:'vendor/text/text', 
    }, 

    shim: { 
     'backbone': { 
      //These script dependencies should be loaded before loading backbone.js 
      deps: ['jquery','underscore'], 
      //Once loaded, use the global 'Backbone' as the module value. 
      exports: 'Backbone' 
     }, 

     'underscore': { 
      exports: '_' 
     }, 

    'handlebars' : { 
      exports : "Handlebars" 
     }, 

    'jquery.mobile-config': { 
      deps: ['jquery'] 
    }, 

    'jquery-mobile': { 
     deps:['jquery','jquery.mobile-config'], 
    }, 

    }, 

    waitSeconds: 5 
}); 


require(['views/test'],function(TestView){   
    new TestView; 

當視圖顯示我同時看到了jQuery Mobile的存在於頁的js/css文件。 但是，當我呈現這個HTML，然後它只是顯示沒有呈現jQuery的移動CSS元素。

對於裁判：在網頁的HTML是：

<div id="summary_page"> 
    <div data-role="page"> 
    <div data-role="content" class="summary" > 
     <ul data-role="listview" > 
    <li class="ui-btn-right" id="brands"> Brands </li> 
    <li class="ui-btn-right" id="pprofile">Personal Profile</li> 
    <li class="ui-btn-right" id="snetworks">Social networks</li> 
    <li class="ui-btn-right" id="tos">Terms and conditions</li> 
    <li class="ui-btn-right" id="ppolicy">Privacy/cookies</li> 
     </ul> 
    </div> 
    </div>  
</div> 

有誰有關於爲什麼jQuery Mobile的的CSS不會在頁面上顯示的線索。 我目前正在開發android平臺上的phonegap。

Answer 1

嘗試在相關頁面上調用trigger（'create'）以刷新它