jquery-mobile - jquery mobile require.js 和主干

Question

我真的很挣扎于 require.js 和 jquery mobile。我有一个松散的文件结构和基于的加载模式

https://github.com/appboil/appboil-requirejs-backbonejs-jquerymobile-phonegap

但它已经很旧了，我必须针对 require 2.0 版本进行调整。是否有社区接受的方式一起使用 jquery mobile、backbonejs 和 requirejs？我想使用 Backbone 路由而不是jquery mobiles。此外，该模板有phonegap，这是我不关心的。

Answer 1

这是我使用的 main.js 文件...

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();
    });
});

最后一点对于让 JQM 正确加载(并实际运行)非常重要。这部分:

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

由于我需要 jqm(jquery mobile)的 jquery，因此我将加载它们全部，并且由于上面的填充代码，依赖项会以正确的顺序加载。我实际上没有将任何 jqm 变量传递到函数调用中，它只传递 $ 和 App.下一个重要部分是 jqm-config 文件:

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

您可以将 jqm 的所有预初始化代码放入该文件中。毕竟，您应该能够使用 jqm!