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-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.

Solution 1

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!

Solution 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

Solution 3

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

Solution 4

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

View more solutions

Comments

[Sneaky Wombat]

unfortunately, not an example of using jqm.

[dhaval]

in backbone-directory there is a sub-folder which uses jquery mobile only

[Sneaky Wombat]

whoops, my eyes missed that second link in your answer. require.js isn't being used though, but that is an interesting example.

[kctang]

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?

[Sneaky Wombat]

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.

[andho]

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?

[Sneaky Wombat]

not sure what mpc is. an every other time error though? yuck. might want to open a new SO question about it.

[andho]

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.

[Joshua]

in the shim, as 'jquery.mobile-config' already requires 'jquery', does this mean that 'jquery.mobile' already implicitly requires 'jquery' and thus it doesn't need to be included explicitly? i.e. >'jquery.mobile': ['jquery','jquery.mobile-config'], can be cut down to >'jquery.mobile': ['jquery.mobile-config'],

[Alan Illing]

That page did help me, but now it's redirecting to the new jquery 1.3 documentation. Please restore it if you can

[Greg Franko]

Updated again. Let me know if you still have issues.

[Myer]

I don't see backbone anywhere in that example, only require.js.

[Greg Franko]

@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/…

[Myer]

@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!

[Jason]

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]

@Joshua 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. This is especially true after an r.js build.

[Evan Hobbs]

This is great -- although I don't believe it will work anymore as jquery mobile defines itself as a module requiring jquery in it's code so shimming will break...

[IcedDante]

I'm sure these update requests are getting annoying- but can you update this for 2014?