jquery mobile require.js and backbone

Question

I\'m really struggling with require.js and jquery mobile. I have a loosely based file structure and loading pattern based off of

https://github.com/appboil/appboil-

Answer 1

If you're using r.js, requirejs optimizer, this is an interest link about issues with jquery.mobile and config: https://github.com/jrburke/requirejs/issues/358

Answer 2

I just addeed a backbone.js, require.js, and jQuery Mobile small example app to the jQuery Mobile documentation. Let me know if this helps:

http://demos.jquerymobile.com/1.4.4/backbone-requirejs/backbone-require.html

Answer 3

Here is the main.js file I use...

require.config({
  baseUrl: "/js/",
  paths: {
    jquery: 'libs/jquery/jquery-1.7.1',
    'jquery.mobile-config': 'libs/jqm/jquery.mobile-config',
    'jquery.mobile': 'libs/jqm/jquery.mobile-1.1.0',
    'jquery.mobile.asyncfilter': 'libs/jqm/asyncfilter',
    underscore: 'libs/underscore/underscore-1.3.3',
    backbone: 'libs/backbone/backbone-0.9.2',
    templates: '../templates'
  },
  shim: {
          'underscore': {
            exports: "_"
          },
          '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'
          },
          'jquery.mobile-config': ['jquery'],
          'jquery.mobile': ['jquery','jquery.mobile-config'],
          'jquery.mobile.asyncfilter': ['jquery.mobile'],
        }
});

require([
  'jquery',
  'app',
  'jquery.mobile','jquery.mobile.asyncfilter'
], function( $, App ){
    $(function(){
      App.initialize();
    });
});

The last bit is very important to get JQM to load correctly (and actually function). This part:

require([
      'jquery',
      'app',
      'jquery.mobile','jquery.mobile.asyncfilter'
    ], function( $, App ){
        $(function(){
          App.initialize();
        });
    });

Since i need jquery for jqm (jquery mobile), i'll load them all and thanks to the shim code above, the dependencies are loaded in the correct order. I don't actually pass any jqm variable into the function call, which only passes $ and App. The next important part is the jqm-config file:

define(['jquery'], function ($) {
      $(document).on("mobileinit", function () {
          $.mobile.ajaxEnabled = false;
          $.mobile.linkBindingEnabled = false;
          $.mobile.hashListeningEnabled = false;
          $.mobile.pushStateEnabled = false;
      });
});

You can place all of your preinit code for jqm in that file. After all that, you should be able to use jqm!

Answer 4

You can check the recent release of backbonejs boilerplate or check christophe's backbone directory which includes all the necessary stuff to start basic app.

Edit

https://github.com/raDiesle/backbone.js-jquerymobile-boilerplate-template