我正在尝试将FlowJS与 EmberJS 集成。我成功地将数据上传到服务器,所以,我在这方面做得很好。
我尝试将流对象数据与 emberJS 组件绑定以通过把手显示数据时失败。由于某种原因,数据绑定不起作用。
这是代码的示例。
HTML
<script type="text/x-handlebars" data-template-name="index">
{{flow-uploader}}
</script>
<script type="text/x-handlebars" id="components/flow-uploader">
<div class="drop"></div>
<!-- file list -->
{{#each file in flow.files}}
<p>File name: {{file.name}}</p>
{{/each}}
</script>
JS
App = Ember.Application.create({
rootElement: '#main'
});
App.FlowUploaderComponent = Ember.Component.extend({
flow: function(){
return new Flow({
target: 'http://google.com',
testChunks: false
});
}.property(),
initDropZone: function(){
var flow = this.get('flow');
var drop = this.$('.drop')[0];
var $this = this;
flow.assignDrop(drop);
/*flow.on('fileAdded', function(file, flow){
});
flow.on('filesAdded', function(files){
});
flow.on('fileSuccess', function(file,message){
console.log('file success');
});
flow.on('fileError', function(flow, message, chunk){
console.log('file error');
});*/
flow.on('filesSubmitted', function(){
console.log($this.get('flow').files);
//flow.upload();
});
/*flow.on('complete', function(event, flow){
console.log('completed');
});
flow.on('uploadStart', function(event, flow){
console.log('uploading..');
});
flow.on('fileProgress', function(flow, file){
});*/
}.on('didInsertElement')
});
可以在http://jsfiddle.net/sisir/qLuobq48/2/现场查看示例
基本上我在这里所做的是将流对象保存为组件属性。files
flow 对象的属性是要上传的文件数组。一旦我们拖放或选择多个文件上传,files
数组就会更新。我们可以在控制台上看到它。日志代码是通过filesSubmitted
事件添加的。
从把手表达式中,每个文件都从文件队列中迭代。最初它是空的,但后来当它被填充时,它不会显示在 html 上。数据绑定由于某种原因无法正常工作。