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フローオブジェクトのプロパティは、アップロードするファイルの配列です。複数のファイルをドラッグ アンド ドロップまたは選択してアップロードすると、files配列が更新されます。コンソールで確認できます。ロギング コードは、filesSubmittedイベントを介して追加されます。
handlebars 式から、各ファイルはファイル キューから反復処理されます。最初は空ですが、後で入力されると、html に表示されません。何らかの理由でデータ バインディングが機能していません。