requirejs - конфигурация прокладки

Question

Я использую Almond и оптимизатор r.js, чтобы объединить все мои скрипты в одном файле для одного приложения на одной странице Backbone.js.

Мой файл сборки:

({ 
    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' 
     } 
    } 
}) 

На мой взгляд Backbone я инициализировать плагин JQuery-макета:

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

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

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

Стекла показывают правильно, однако я не могу изменить размер любой из них. Я обнаружил, что $.fn.draggable (JQuery UI Draggable widget) не инициализируется в то время, когда объявлен плагин jquery-layout.

Это означает, что, возможно, виджет не загружается. Поэтому я проверил объединенный исходный файл и заметил, что код JQuery UI Draggable появляется перед кодом плагина jquery-layout, что означает, что зависимости вставлены в правильном порядке. Печать $.fn.draggable в консоли Firebug также показывает, что виджет доступен, по крайней мере, после того, как документ готов.

jQuery, подчеркивание, позвоночник, пользовательский интерфейс jQuery - все модули AMD. В jquery-layout нет совместимости с AMD, отсюда и настройка прокладки. Это зависит от ui.core JQuery UI и ui.draggable per their docs.

Чтобы все это не звучало слишком абстрактно, here является демонстрацией плагина jquery-layout.

Я «потратил впустую» в течение 8 часов, пытаясь понять это напрасно, любая помощь в том, как исправить это, спасет мой день. Скорее всего, это связано только с некоторыми исправлениями моей конфигурации shim в файле сборки.

Answer 1

Я решил проблему, сделав плагин jquery-layout, совместимый с AMD, совместимым с AMD. Я использовал крючок onBuildWrite оптимизатора r.js в файле сборки. Таким образом, зависимость JQuery UI ui.draggable инициализируется перед кодом, не являющихся AMD-осведомленных плагин нагрузки:

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

Answer 2

После ответа от @Genti и используя последние JQuery-UI, после прокладки работал для меня.

shim: { 
    'jquery.layout': { 
     deps: ['jquery', 'jquery-ui/core', 'jquery-ui/widgets/draggable', 'jquery-ui/effect', 'jquery-ui/effects/effect-slide', 'jquery-ui/effects/effect-drop', 'jquery-ui/effects/effect-scale'], 
     exports: 'jQuery.fn.layout' 
    } 
    }