Jquery Mobile重定向或更改url時，頁面沒有任何css

Question

我正在使用骨幹網，jquery mobile，express app。一切正常，當應用程序啓動並正常工作，但是，當我點擊一個鏈接或更改html正確呈現的url，但沒有出現jquery移動魔術。它只在登錄部分呈現頁眉和頁腳以及格式，但當網址發生變化並且我回來時，頁面會丟失其css或jquery移動魔術。

define(['views/index', 'views/register', 'views/login', 'views/forgotpassword', 'views/profile', 
    'views/vinbookDoc', 'models/Account', 'models/Vinbook', 'models/vinBooksCollection'], 

    function(IndexView, RegisterView, LoginView, ForgotPasswordView, ProfileView, 
         vinbookDocView, Account, Vinbook, vinBooksCollection) { 

    var AppRouter = Backbone.Router.extend({ 
    currentView: null, 

    routes: { 
     "index": "index", 
     "login": "login", 
     "desk/:id": "desk", 
     "profile/:id": "profile", 
     "register": "register", 
     "forgotpassword": "forgotpassword", 
     "vinbook/:id": "showVinbook" 
    }, 

    initialize: function(){ 
     $('.back').live('click', function(event) { 
      window.history.back(); 
      return false; 
     }); 
     this.firstPage = true; 
    }, 

    showVinbook: function(id) { 

     var getCollection = new vinBooksCollection(); 
     getCollection.url = '/accounts/me/vinbook'; 
     this.changeView(new vinbookDocView({ 
      collection: getCollection, 
      id: id 
     })); 
     getCollection.fetch(); 
    }, 

    changeView: function(page) { 

     this.currentView = page; 
     $(this.currentView.el).attr('data-role', 'page'); 
     this.currentView.render(); 
     $('body').append($(this.currentView.el)); 
     var transition = $.mobile.defaultPageTransition; 
     // We don't want to slide the first page 
     if (this.firstPage) { 
      transition = 'none'; 
      this.firstPage = false; 
     } 
     $.mobile.changePage($(this.currentView.el), {changeHash:false, transition: transition}); 

    }, 

    index: function() { 
     this.changeView(new IndexView()); 
    }, 

    desk: function (id){ 
     var model = new Account({id:id}); 
     this.changeView(new ProfileView({model:model})); 
     model.fetch({ error: function(response){ console.log ('error'+JSON.stringify(response)); } }); 
     console.log('works'); 
    }, 

    profile: function (id){ 
     this.changeView(new IndexView()); 
    }, 

    login: function() { 
     this.changeView(new LoginView()); 
    }, 

    forgotpassword: function() { 
     this.changeView(new ForgotPasswordView()); 
    }, 

    register: function() { 
     this.changeView(new RegisterView()); 
    } 
    }); 

    return new AppRouter(); 
}); 

需要

require.config({ 
    paths: { 
    jQuery: '/js/libs/jquery', 
    jQueryUIL: '/js/libs/jqueryUI', 
    jQueryMobile: '/js/libs/jqueryMobile', 
    Underscore: '/js/libs/underscore', 
    Backbone: '/js/libs/backbone', 
    models: 'models', 
    text: '/js/libs/text', 
    templates: '../templates', 
    jqm: '/js/jqm-config', 

    AppView: '/js/AppView' 
    }, 

    shim: { 
    'jQueryMobile': ['jQuery', 'jqm' ], 
    'jQueryUIL': ['jQuery'], 

    'Backbone': ['Underscore', 'jQuery', 'jQueryMobile', 'jQueryUIL'], 
    'AppView': ['Backbone'] 
    } 
}); 

require(['AppView' ], function(AppView) { 
    AppView.initialize(); 
}); 

登錄

define(['AppView','text!templates/login.html'], function(AppView, loginTemplate) { 
    window.loginView = AppView.extend({ 
    requireLogin: false, 

    el: $('#content'), 

    events: { 
     "submit form": "login" 
    }, 

    initialize: function(){ 
     $.get('/login', {}, function(data){}); 
    }, 

    login: function() { 

     $.post('/login', { 
     email: $('input[name=email]').val(), 
     password: $('input[name=password]').val() 
     }, 

     function(data) { 
     console.log(data); 
     if (!data.error){window.location.replace('#desk/me');} 

     }).error(function(){ 
     $("#error").text('Unable to login.'); 
     $("#error").slideDown(); 
     }); 

     return false; 
    }, 

    render: function() { 
     this.$el.html(loginTemplate); 
     $("#error").hide(); 
     return this; 
    } 
    }); 

    return loginView; 
}); 

只是一些細節：

當我從頁面或URL更改到另一個頁面，呈現的閃光網站出現，然後CSS或設計消失。

Answer 1

我認爲這可以解決你的問題：

$(document).bind('pagechange', function() { 
    $('.ui-page-active .ui-listview').listview('refresh'); 
    $('.ui-page-active :jqmData(role=content)').trigger('create'); 
});