2014-08-27 3 views
1

Я пытаюсь загрузить файл jquery fileupload на blue-imp с RequireJS.загрузить blue-imp jquery fileupload with RequireJS

У меня возникла проблема при загрузке. Я пробовал такие решения, как this и this, но никто не работал с моей ситуацией.

, что я сделал в моей main.js является

require.config({ 
    baseUrl : 'js', 
    paths: { 
     jquery: 'lib/jquery/jquery-1.11.0', 
     jqueryfileupload : 'lib/jquery/jquery.fileupload', 
     underscore: 'lib/backbone/underscore/underscore-min', 
     backbone: 'lib/backbone/backbone-min', 
    }, 
    shim : {   
    'underscore' : { 
     exports : "_" 
    }, 
    'backbone' : { 
     deps : [ "underscore", "jquery" ], 
     exports : "Backbone" 
    }, 
    'jqueryFileUpload' : { 
     deps : ["jquery"]   
    } 
}); 

на мой взгляд, когда я буду laoding это

define(['backbone', 'jqueryFileUpload' ], 
     function(Backbone, fileupload) { 

}); 

Это дает мне ошибку на консоли

"NetworkError: 404 Not Found - http://localhost/AppUI/js/jqueryFileUpload.js?cmmn=1409151733588"

Почему он выбирает основу из своего правильного пути и почему jquery FileUpload от baseURL напрямую?

Я могу выполнять обычные операции jquery, такие как val(), append(), но у этого есть зависимость, поэтому я предоставил его.

Я исследовал немного больше и обнаружил вложенные зависимости для файловupload.js, которые представляют собой jquery ui и widget. Я также импортировал их в свои

 paths : { 
      jquery: 'lib/jquery/jquery-1.11.0', 
      jqueryUI : 'lib/jquery/jquery-ui-1.10.4.custom.min', 
      jqueryfileupload : 'lib/jquery/jquery.fileupload' 
     }, 

     shim : { 
      'jqueryUI' : ['jqueryUI'], 
      'jqueryFileUpload' : { 
        deps : ["jquery", "jqueryUI", "jqueryIframetransport"], 
        exports : "jQueryFileUpload" 
     } 
} 

Даже после этого у меня такая же ошибка. Он поднимает неправильный путь.

Любые предложения или подходы для продолжения?

ответ

0

Конфигурация непоследовательно относится к вашему модулю с именем jqueryfileupload (в вашем paths) и jqueryFileUpload (в вашем shim, и в вызове define). Вы можете изменить свой paths, чтобы использовать jqueryFileUpload, чтобы он был согласован везде.

Когда вы сообщаете RequireJS о модуле, вы должны ссылаться на него одним и тем же именем везде. Что касается RequireJS, то foo, FOO, Foo, FoO - все разные модули.

1

Вы не можете использовать шайбы конфигурации с JQuery FileUpload по этой причине (shim config):

//Remember: only use shim config for non-AMD scripts, 
//scripts that do not already call define(). The shim 
//config will not work correctly if used on AMD scripts, 
//in particular, the exports and init config will not 
//be triggered, and the deps config will be confusing 
//for those cases. 

Jquery источник загрузки файлов файлы уже используют определение (AMD) скриптов! (Смотреть на jquery.fileupload.js) Даже так что вы можете настроить requirejs зависимостей таким образом:

каталог проекта верхнего уровня (становой совместимый):

* app/ 
    - modules/ 
     - module.js 
    - vendor/ 
     - jquery/ 
      - dist/ 
       - jquery.js 
     - underscore/ 
      - underscore.js 
     - jquery.fileupload-upload/ 
      - vendor/ 
       - jquery.ui.widget.js 
      - js/ 
       - jquery.fileupload.js 
       - jquery.fileupload.image.js. 
       - ... 

config.js:

var require = { 
    "baseUrl": "/app/", 
    "shim": { 
     jquery: { 
      exports: "$" 
     }, 
     underscore: { 
      exports: "_" 
     } 
    }, 
    "paths": { 
     "jquery": "vendor/jquery/dist/jquery.min", 
     "jquery.ui.widget": "vendor/jquery-file-upload/js/vendor/jquery.ui.widget", 
     "underscore": "vendor/underscore/underscore-min", 
     "bootstrap": "vendor/bootstrap/dist/js/bootstrap.min", 
     "tmpl": "vendor/blueimp-tmpl/js/tmpl", 
     "load-image": "vendor/blueimp-load-image/js/load-image", 
     "load-image-meta": "vendor/blueimp-load-image/js/load-image-meta", 
     "load-image-exif": "vendor/blueimp-load-image/js/load-image-exif", 
     "load-image-ios": "vendor/blueimp-load-image/js/load-image-ios", 
     "canvas-to-blob": "vendor/blueimp-canvas-to-blob/js/canvas-to-blob", 
     "jquery.iframe-transport": "vendor/jquery-file-upload/js/jquery.iframe-transport", 
     "jquery.fileupload": "vendor/jquery-file-upload/js/jquery.fileupload", 
     "jquery.fileupload-process": "vendor/jquery-file-upload/js/jquery.fileupload-process", 
     "./jquery.fileupload-process": "vendor/jquery-file-upload/js/jquery.fileupload-process", 
     "jquery.fileupload-image": "vendor/jquery-file-upload/js/jquery.fileupload-image", 
     "jquery.fileupload-audio": "vendor/jquery-file-upload/js/jquery.fileupload-audio", 
     "jquery.fileupload-video": "vendor/jquery-file-upload/js/jquery.fileupload-video", 
     "jquery.fileupload-validate": "vendor/jquery-file-upload/js/jquery.fileupload-validate", 
     "jquery.fileupload-ui": "vendor/jquery-file-upload/js/jquery.fileupload-ui", 
    } 
}; 

модуль:

define(['jquery', 
'tmpl', 
'load-image', 
'load-image-meta', 
'load-image-exif', 
'canvas-to-blob', 
'jquery.iframe-transport', 
'jquery.fileupload', 
'jquery.fileupload-process', 
'jquery.fileupload-image', 
'jquery.fileupload-audio', 
'jquery.fileupload-video', 
'jquery.fileupload-validate', 
'jquery.fileupload-ui'], 

function ($, ...) { 
Смежные вопросы