16

私はrequire.jsとjquery mobileに本当に苦労しています。大まかに基づいたファイル構造と、に基づいた読み込みパターンがあります

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

しかし、それは古いので、require 2.0 バージョンに合わせて調整する必要がありました。jquery mobile、backbonejs、requirejs を一緒に使用するコミュニティで受け入れられている方法はありますか? jquery モバイルではなく、バックボーンのルーティングを使用したいと思います。さらに、そのテンプレートには phonegap がありますが、私は関係ありません。

4

4 に答える 4

27

これが私が使用する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が必要なので、それらをすべてロードします。上記のshimコードのおかげで、依存関係は正しい順序でロードされます。私は実際にはjqm変数を関数呼び出しに渡さず、$とAppのみを渡します。次の重要な部分はjqm-configファイルです。

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

jqmのすべてのpreinitコードをそのファイルに配置できます。その後、jqmを使用できるようになります。

于 2012-06-08T18:01:29.613 に答える
2

backbone.js、require.js、および jQuery Mobile の小さなサンプル アプリを jQuery Mobile ドキュメントに追加しました。これが役立つかどうか教えてください：

http://demos.jquerymobile.com/1.4.4/backbone-requirejs/backbone-require.html

于 2012-10-27T14:45:04.793 に答える
2

backbonejsボイラープレートの最近のリリースを確認するか、基本的なアプリを起動するために必要なものがすべて含まれているクリストフのバックボーンディレクトリを確認してください。

編集

https://github.com/raDiesle/backbone.js-jquerymobile-boilerplate-template

于 2012-06-06T06:22:37.560 に答える