16

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-requirejs-backbonejs-jquerymobile-phonegap

but it's old and I had to make adaptions for the require 2.0 version. Is there a community accepted way of using jquery mobile, backbonejs and requirejs together? I'd like to use backbone's routing and not jquery mobiles. Additionally, that template has phonegap, which i'm not concerned with.

1
  • for all that is holy and pure, i may have figured out how. I'll test and if it does work, i'll put up source on github with a link. Jun 6, 2012 at 2:33

4 Answers 4

27

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!

8
  • Hi, thanks for this! I am able to get all working, including my preinit codes for jqm, however, I do not understand "jquery.mobile.asyncfilter". Any hints?
    – kctang
    Jun 15, 2012 at 0:00
  • 2
    sorry, that's a data filter plugin i wrote for jqm. you can remove it. That's how you'd init other jqm or jquery plugins though. Jun 18, 2012 at 6:10
  • Hey this was a big help, thanks. I was getting the following error: TypeError: mpc is undefined [Break On This Error] mpc.trigger( pbcEvent, triggerData ); Even after your changes this shows up, but only every other time. Any idea?
    – andho
    Nov 27, 2012 at 4:11
  • not sure what mpc is. an every other time error though? yuck. might want to open a new SO question about it. Nov 30, 2012 at 5:10
  • mpc stands for mobile page container. It's a code that should run after mobile init, but since I'm using backbone to run $.mobile.changePage, mpc.trigger ends up running before mobile init. I'll set up a new question once I have some time to setup a small sample.
    – andho
    Jan 16, 2013 at 4:22
2

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

3
  • unfortunately, not an example of using jqm. Jun 6, 2012 at 16:57
  • in backbone-directory there is a sub-folder which uses jquery mobile only
    – dhaval
    Jun 6, 2012 at 17:24
  • whoops, my eyes missed that second link in your answer. require.js isn't being used though, but that is an interesting example. Jun 6, 2012 at 19:19
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

6
  • That page did help me, but now it's redirecting to the new jquery 1.3 documentation. Please restore it if you can Feb 17, 2013 at 17:46
  • Updated again. Let me know if you still have issues. Mar 10, 2013 at 20:55
  • I don't see backbone anywhere in that example, only require.js.
    – Myer
    Aug 2, 2013 at 0:34
  • @PeterNore Have you read the entire post? Also, here is the source of the example app: github.com/jquery/jquery-mobile/tree/master/demos/examples/… Aug 2, 2013 at 3:39
  • @GregFranko - sorry, I'm new to RequireJS, and didn't realize that the data-main="js/mobile" on the require script tag meant that I could find the included dependencies referenced at js/mobile.js. Thanks!
    – Myer
    Aug 2, 2013 at 12:50
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

1
  • 2
    This solved my problem. Especially be aware of the notes in the docs for shim that state: "The shim config only sets up code relationships. To load modules that are part of or use shim config, a normal require/define call is needed. Setting shim by itself does not trigger code to load."
    – Jason
    Oct 8, 2013 at 17:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.