title: jquery mobile page loading widget not working
body: <p>Am building an app using jquery mobile, backbone.js, marionette.js and require.js.
  Am currently trying to use the jQuery mobile page loading widget in a view but i get this error</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'loader' of undefined 
  </code></pre>
  
  <p>The start point for my app looks like this</p>
  
  <pre><code> require.config({
      paths: {
           jquery: 'vendor/jquery-1.9.1.min',
          'jquery.mobile': 'vendor/jquery.mobile-1.3',
          'jquery.mobile-config': 'vendor/jquery.mobile.config',
          underscore: 'vendor/backbone/underscore',
          backbone: 'vendor/backbone/backbone',
          marionette: 'vendor/marionette/backbone.marionette',
          text: 'vendor/text'
      },
  
      shim: {
          underscore: {
              exports: '_'
          },
  
          backbone: {
              exports: 'Backbone',
              deps: ['jquery','underscore']
          },
  
          'jquery.mobile-config': ['jquery'],
          'jquery.mobile': ['jquery','jquery.mobile-config'],
  
          marionette: {
              exports: 'Backbone.Marionette',
              deps: ['backbone']
          }
      }
  });
  
  require(['jquery','app', 'jquery.mobile'], function ($, App) {
      $(function() {
          App.start();
      });
  });
  </code></pre>
  
  <p>the jquery.mobile.config file looks like this</p>
  
  <pre><code>define(['jquery'], function ($) {
        $(document).bind("mobileinit", function () {
            $.extend(  $.mobile , {autoInitializePage: false});
            $.mobile.ajaxEnabled = false;
            $.mobile.linkBindingEnabled = false;
            $.mobile.hashListeningEnabled = false;
            $.mobile.pushStateEnabled = false;
        });
  });
  </code></pre>
  
  <p>and the view looks like this</p>
  
  <pre><code>define(['jquery', 'marionette','text!templates/login.html'], function ($, marionette, ViewTemplate) {
  
      'use strict';
  
      var LoginView = marionette.ItemView.extend({
  
          template: _.template(ViewTemplate),
  
          events: {
              'click #login-btn': 'login'
          },
  
          login: function (event) {
  
              $.mobile.loading('show', {
                  text: 'Please wait',
                  textVisible: true
              });
          }
      });
  
      return LoginView;
  });
  </code></pre>
  
  <p>What could be the problem?</p>