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'）以刷新它