如何使用带有backbone.js和require.js的Jquery-file-upload

我有一个使用require.js的backbone.js应用程序，我希望在jquery插件之后实现这个： https ： //github.com/blueimp/jQuery-File-Upload

我遵循了这个流程： https ： //github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

如果有人可以通过此插件向我发送骨干应用程序工作的示例，或者可以帮助我进行其他建议。

在您阅读我的代码之前：

Require.js配置：

require.config({ paths: { 'jquery' : 'common/vendors/jquery_2.1.0', 'underscore' : 'common/vendors/underscore_1.6.0', 'backbone' : 'common/vendors/backbone_1.1.2', 'layoutmanager' : 'common/vendors/backbone.layoutmanager_0.9.5', 'jquery.iframe-transport' : 'common/vendors/jquery.iframe.transport_1.0', 'jquery.ui.widget' : 'common/vendors/jquery.ui.widget_1.10.4', 'jquery.fileupload.ui' : 'common/vendors/jquery_fileupload/jquery.fileupload.ui_9.6.0', 'jquery.fileupload' : 'common/vendors/jquery_fileupload/jquery.fileupload_5.40.3' }, shim: { 'jquery': { exports: '$' }, 'underscore': { exports: '_' }, 'backbone' : { deps: ["jquery", "underscore"], exports: "Backbone" }, 'layoutmanager' : { deps: ["backbone"] } } }); 

我的骨干视图：

 var define, selector, console; define([ 'jquery', 'underscore', 'backbone', 'layoutmanager', '../../../../common/models/global/model_picture', 'jquery.ui.widget', 'jquery.iframe-transport', 'jquery.fileupload' ], function ( $, _, Backbone, LayoutManager, PictureModel ) { "use strict"; return Backbone.Layout.extend({ __class__ : "adPostPictureRow", initialize: function () { this.template = _.template($('#adpost_picture_row_template').html()); }, events: { "change .adpost_picture_input_file" : "handleImageUpload" }, handleImageUpload: function () { selector = this.$('.adpost_picture_input_file')[0]; this.uploadProgress = 0; this.model = new PictureModel({ files : selector.files[0] }); var test = $('#adpost_picture_fileupload', this.el).fileupload({ dataType: 'json', autoUpload: true, singleFileUploads: true, url: '../upload/adpost/img', done: function (data) { console.log('upload done'); _.each(data.result, function (index, file) { console.log(file.name); }); }, add: function () { // How can access to this function for see the console.log result console.log('test upload '); } }); console.log(test); } }); }); 

谢谢

Answer 1

我在我的骨干应用程序中使用此插件。

它适用于我在render方法中使用Jquery插件。 这是我的代码示例。

Html文件。

骨干视图

 render: function(){ this.$el.html(this.template); $("#Anything").fileupload({ dataType:'json', add : this.AddFile, fail: this.AddFileFail }); AddFile : function(data){ return data.submit(); } 

}