如何使用Jquery-file-upload与backbone.js &require.js
How use Jquery-file-upload with backbone.js & require.js
我有一个与require.js工作的backbone.js应用程序,我想实现以下jquery插件:https://github.com/blueimp/jQuery-File-Upload
我遵循这个过程:https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
如果有人可以给我这个插件的骨干应用程序工作的一个例子,或者可以帮助我与其他建议。
在你能读我的代码之前:
Require.js config:
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"]
}
}
});
My Backbone View:
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);
}
});
});
谢谢
我在我的主干应用中使用这个插件。
它为我使用Jquery插件在我的渲染方法。下面是我的代码示例。
Html文件。
<form id="Anything" action="the api url" method='post' encrtype="multipart/form-data">
<input type='file'/ accept='.txt'>
</form>
<<p> 骨干视图/strong> render: function(){
this.$el.html(this.template);
$("#Anything").fileupload({
dataType:'json',
add : this.AddFile,
fail: this.AddFileFail
});
AddFile : function(data){
return data.submit();
}
}
相关文章:
- 无法加载Ace.js编辑器模式和主题(命名空间项目&AMD require.js&grunt
- 弹出窗口-jQuery Mobile、Backbone.js和Require.js
- 在非SPA(单页应用程序)中使用Require.js和Backbone
- 在混合基本 URL 下动态加载 require.js 模块
- 节点JS require不起作用
- 困惑为什么我在 Node.js (require.js) 中收到此错误
- 使用节点 js require() 时的循环
- Node.js require() 总是返回未定义的
- javascript标记equivant中的node.js require()
- Angular.js+require.js+jQuery插件自定义指令
- Node.js:require()并传递变量
- Backbone.js+require.js:等待文件加载
- Node.js require() vs RequireJS?
- 如何使用Jquery-file-upload与backbone.js &require.js
- 通过Node.js require和CoffeeScript中的类解决循环依赖
- node . js“require"功能和参数
- Backbone.js,require.js:我如何将我的模型、视图和集合转换为require.js模块
- Backbone.js + Require.js and ViewsFactory
- JS“//= require bootstrap/” 语法是什么意思?(引导 3 屁股)
- Node.js ' require '放入一个数组而不是一个变量