0

Almond と r.js オプティマイザを使用して、Backbone.js ベースのシングル ページ アプリケーション用にすべてのスクリプトを 1 つのファイルに結合しています。

私のビルドファイル:

({
    name: '../bower_components/almond/almond',
    include: ['main'],
    insertRequire: ['main'],
    baseUrl: 'src',
    optimize: 'uglify2',
    mainConfigFile: 'src/main.js',
    out: 'javascripts/scripts.js',
    preserveLicenseComments: false,
    paths: {
        jquery: '../bower_components/jquery/dist/jquery',
        underscore: '../bower_components/underscore/underscore',
        backbone: '../bower_components/backbone/backbone',
        kineticjs: '../bower_components/kineticjs/kineticjs',
        'jquery-ui': '../bower_components/jquery-ui/ui',
        'jquery.layout': '../bower_components/jquery.layout/dist/jquery.layout-latest'
    },
    shim: {
        'jquery.layout': {
            deps: [
                'jquery-ui/core',
                'jquery-ui/draggable',
                'jquery-ui/effect',
                'jquery-ui/effect-slide'
            ],
            exports: 'jQuery.fn.layout'
        }
    }
})

バックボーン ビューで、jquery-layout プラグインを初期化します。

define(['backbone', 'underscore', 'jquery.layout'], function(Backbone, _) {
	'use strict'

    return Backbone.View.extend({
        el: $('#application'),

        initialize: function() {
            this.$el.layout({
              west: {
                size: '50%',
                closable: false,
                slidable: false,
                resizable: true
              }
            });
        }
    });
});

ペインは正しく表示されますが、サイズを変更できません。$.fn.draggablejquery-layout プラグインの宣言時に (JQuery UI Draggable widget) が初期化されていないことが わかりました。

これは、おそらくウィジェットがロードされていないことを示しています。結合されたソース ファイルを確認したところ、JQuery UI Draggable ウィジェット コードが jquery-layout プラグイン コードの前に表示されていることに気付きました。これは、依存関係が正しい順序で挿入されていることを意味します。Firebug コンソールで印刷$.fn.draggableすると、少なくともドキュメントの準備ができた後、ウィジェットが使用可能であることが示されます。

jQuery、アンダースコア、バックボーン、jQuery UI はすべて AMD モジュールです。jquery-layout には AMD との互換性がないため、shim 構成. docs ごとに、JQuery UI の ui.core および ui.draggable に依存します。

これらすべてが抽象的になりすぎないように、jquery-layout プラグインのデモを次に示します。

私はこれを無駄に理解しようとして8時間以上「無駄」にしました。これを修正する方法についての助けがあれば、私の一日を救うでしょう. ほとんどの場合、これには、ビルド ファイル内の shim 構成の一部の修正のみが含まれます。

4

2 に答える 2

1

AMD非対応のjquery-layoutプラグインをAMD互換にすることで問題を解決しました。onBuildWriteビルド ファイルで r.js オプティマイザーのフックを使用しました。このようにしてui.draggable、AMD 非対応プラグインのコードが読み込まれる前に、jQuery UI の依存関係が初期化されます。

({
	name: '../bower_components/almond/almond',
        include: ['main'],
        insertRequire: ['main'],
	baseUrl: 'src',
	optimize: 'uglify2',
	mainConfigFile: 'src/main.js',
	out: 'javascripts/scripts.js',
	preserveLicenseComments: false,
	paths: {
		jquery: '../bower_components/jquery/dist/jquery',
		underscore: '../bower_components/underscore/underscore',
		backbone: '../bower_components/backbone/backbone',
		kineticjs: '../bower_components/kineticjs/kineticjs',
		'jquery-ui': '../bower_components/jquery-ui/ui',
		'jquery.layout': '../bower_components/jquery.layout/dist/jquery.layout-latest'
	},
	shim: {
		'jquery.layout': {
			deps: ['jquery', 'jquery-ui/draggable', 'jquery-ui/effect', 'jquery-ui/effect-slide'],
			exports: 'jQuery.fn.layout'
		}
	},
	onBuildWrite: function(moduleName, path, contents) {
		if (moduleName == 'jquery.layout') {
			contents = "define('jquery.layout', ['jquery', 'jquery-ui/draggable', 'jquery-ui/effect', 'jquery-ui/effect-slide'], function(jQuery) {" + contents + "});";
		}
		return contents;
	}
})

于 2015-03-19T11:57:31.810 に答える