jquery mobile require.js and backbone

问题:

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:

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!

回答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:

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

回答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