2

我正在使用骨干网、jquery mobile、express 应用程序。当应用程序启动并正常工作时，一切看起来都很好，但是，当我单击链接或更改 url 时，html 会正确呈现，但不会出现 jquery 移动魔术。它只在登录部分呈现页眉和页脚和格式，但是当 url 更改并且我回来时，页面失去了它的 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 或设计消失。

4

1 回答 1

0

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

$(document).bind('pagechange', function() {
  $('.ui-page-active .ui-listview').listview('refresh');
  $('.ui-page-active :jqmData(role=content)').trigger('create');
});
于 2014-01-02T13:19:23.497 回答