Backbone + JQuery Mobile + RequireJS

2019-06-15 00:02发布

问题:

I am having a big proglem with RequireJS. This configuration works randomly. I dont know why, once it works and once it doesn't:

requirejs.config({
  baseUrl: 'js',
  urlArgs: "bust=" + (new Date()).getTime(),
  paths: {
    jquery: 'libs/jquery/jquery-1.10.2.min',
    underscore: 'libs/underscore/underscore-min',
    backbone: 'libs/backbone/backbone-min',
    marionette: 'libs/marionette/backbone.marionette',
    cordova: 'libs/cordova/cordova-1.9.0',
    jquerym: 'libs/jquery-mobile/jquery.mobile-1.4.0'
  },

  shim: {
    'jquery': {
      deps: []
    },
    'jquerym': {
      deps: ['jquery'],
      exports: 'jquery'
    },
    'underscore': {
      deps: [],
      exports: "_"
    },
    'backbone': {
      deps: ['jquery', 'underscore'],
      exports: 'Backbone'
    },
    'marionette': {
      deps: ['jquery', 'underscore', 'backbone']
    }
  },
  priority: ['jquery', 'jquerym']
});


require(['app', 'jquery', 'jquerym'], function (App) {
  $(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;
    // Remove page from DOM when it's being replaced 
    $('div[data-role="page"]').live('pagehide', function (event, ui) {
      $(event.currentTarget).remove();
    });
  });

  console.log('jQuery version ' + $().jquery + ' installed');
  App.initialize();
});

回答1:

The Mobile-Init-Event has to be bound before jQuery Mobile is loaded for it to be triggered correctly. Try using something like this:

require(["jquery"], function( $ ){
    $( document ).one( "mobileinit", function() {
        //Set your configuration and event binding
        $.mobile.ajaxEnabled = false;
        $.mobile.linkBindingEnabled = false;
        $.mobile.hashListeningEnabled = false;
        $.mobile.pushStateEnabled = false;
        // Remove page from DOM when it's being replaced 
        $('div[data-role="page"]').live('pagehide', function (event, ui) {
            $(event.currentTarget).remove();
        });
    });

    require( [ "App", "jquerym" ], function( App, jqm ) {
        /* Do Stuff with jqm here if you want like jqm.initializePage() if turned off */
        App.initialize();
    });
});