Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/89.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html Jquery Mobile在重定向或更改url时,页面没有任何css_Html_Node.js_Jquery Mobile_Backbone.js_Requirejs - Fatal编程技术网

Html Jquery Mobile在重定向或更改url时,页面没有任何css

Html Jquery Mobile在重定向或更改url时,页面没有任何css,html,node.js,jquery-mobile,backbone.js,requirejs,Html,Node.js,Jquery Mobile,Backbone.js,Requirejs,我正在使用一个主干、jquery移动、express应用程序。当应用程序启动并正常工作时,一切看起来都很好,但是,当我单击链接或更改url时,html会正确呈现,但不会出现jquery mobile magic。它只在登录部分呈现页眉、页脚和格式,但当url发生变化,我返回时,页面将失去css或jquery mobile魔力 define(['views/index', 'views/register', 'views/login', 'views/forgotpassword', 'views

我正在使用一个主干、jquery移动、express应用程序。当应用程序启动并正常工作时,一切看起来都很好,但是,当我单击链接或更改url时,html会正确呈现,但不会出现jquery mobile magic。它只在登录部分呈现页眉、页脚和格式,但当url发生变化,我返回时,页面将失去css或jquery mobile魔力

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或设计就会消失。

我认为这可以解决您的问题:

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