私は使用していませんが、特定のページで必要なときunderscore
にフェッチするプラグインも大量に必要です。requireJS
Jquery Mobileで動作するようになるまでしばらく時間がかかりましたが、これが私のアプリケーションの実行方法です(エラーが発生しなくなったので、自由にコピーしてください)
1)requirejs
ページヘッダーに追加
<script type="text/javascript" data-main="../js/main" src="../js/libs/require/require.js"></script>
2)私はこれを持っているを使用しoverrides.js
ています:
// pre-sets
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
});
これが必要なのは、jquery mobile
BEFORE require.js
(mobileinitとdocready)がトリガーされるためです。これが、おそらくすべての問題の理由です= JQMは、他のすべてがロードおよびレンダリングされる前に実行を開始するため、アプリケーションコントローラー(my app.js
)から手動でJQMをトリガーする必要があります。
3)私のmain.js
設定
var IS_LOCAL = /(:\/\/localhost|file:\/\/)/.test(document.location.href);
requirejs.config({
waitSeconds : (IS_LOCAL? 2 : 45)
, baseUrl: "../js"
//, enforceDefine: true
, paths: {
app: 'app'
, overrides: 'overrides'
, jquery: 'libs/jquery/jquery.min'
, jqm: 'libs/jquery-mobile/jquery-mobile.min'
, multiview: 'services/multiview/multiview.min'
, respond: 'services/respond/respond.min'
, klass: 'services/klass/klass.min'
}
, shim: {
'overrides': { deps: ['jquery'] }
, 'klass': { deps: ['jquery'] }
, 'jqm': { deps: ['jquery'], exports: 'mobile' }
, 'services/multiview/multiview.min' : { deps: ['jquery', 'jqm'] }
, 'services/add2home/add2home.min' : { deps: ['jquery'] }
, 'services/datatables/datatables.min' : { deps: ['jquery'] }
... more ...
, 'services/respond/respond.min' : { deps: ['jquery'] }
}
});
requirejs([ 'overrides', 'jquery', 'jqm', 'multiview', 'respond', 'app'],
function( $, overrides, mobile, multiview, respond, App){
App.start();
});
4)次にapp.js
、アプリケーションを実行し、app.js (config files
すべてのプラグインに)が必要なものがあります。このようにして、オンデマンドでロードできます。このように見えます:
define([], function(){
var start = function() {
require([ 'overrides', 'jquery', 'jqm','multiview', 'respond' ],function() {
// your magic goes here...
// request a plugin:
$(document).on('pagebeforeshow.add2home', '#login', function() {
// add2Home - trigger once and lock
var dom = $('html');
if ( dom.jqmData('bound') != true ) {
dom.jqmData('bound', true);
require(['services/addtohome/app'], function (App) {
App.render();
});
};
});
// don't forget to trigger JQM manually
if ( $.mobile.autoInitializePage == false){
$.mobile.initializePage();
}
}); // end require
} // end start
return {"start":start};
});
5)これによりapp.js
、すべてのプラグイン構成を含むプラグイン構成ファイルが呼び出されます。このように見えます:
define(['services/addtohome/app', 'services/addtohome/addtohome.min'], function( app, addtohome ) {
function render() {
if ('standalone' in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion)) {
var addToHomeConfig = {
touchIcon:true,
animationIn: 'bubble',
animationOut: 'drop',
returningVisitor: 'true',
expire: '10',
};
};
};
return {
render:render
};
});
もちろん、必要なスクリプトが多いほど時間がかかりますが、このセットアップでは、圧縮+gzip圧縮された132kのJavascriptを正常にプルできます。