0

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 モバイル js/css ファイルが表示されます。しかし、この HTML をレンダリングすると、jquery モバイル css 要素がレンダリングされずに表示されます。

ref: ページの 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 がページに表示されない理由を知っている人はいますか? 私は現在、phonegap の Android プラットフォームで開発を行っています。

4

1 に答える 1

0

関連するページで trigger('create') を呼び出して更新してみてください

于 2013-06-12T13:22:15.463 に答える