Integrating Flow JS with Ember JS - Data not Binded

Question

I am trying to integrate FlowJS with EmberJS. I was successful to upload data to server, so, I am good on that part.

I am unsuccessful When trying to bind flow object data with emberJS component to show data via handlebars. For some reason data binding is not working.

Here is an example of the code.

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')

    });

Example can be seen live at http://jsfiddle.net/sisir/qLuobq48/2/

Basically what I am doing here is to save the flow object as component property. files property of flow object is the array of file to be uploaded. Once we drag and drop or select multiple files to upload the files array gets updated. We can see it on the console. The logging code is added via filesSubmitted event.

From the handlebars expression each file is iterated from the files queue. Initially it is empty but later when it gets populated it doesn't show on the html. The data binding is not working for some reason.

Answer 1

In your component logic:

App.FlowUploaderComponent = Ember.Component.extend({

    flow: function(){
        return new Flow({
            target: 'http://google.com',
            testChunks: false
        });
    }.property(),

    initDropZone: function(){

        var $this = this;    

        var flow = this.get('flow');
        var drop = this.$('.drop')[0];

        flow.assignDrop(drop);

        flow.on('filesSubmitted', function(){

          //for setting a single property
          $this.set('flowFiles', flow.files);

          //for setting multiple properties
          // $this.setProperties({'flowFiles': flow.files, /* etc.. */});

        });


    }.on('didInsertElement')

});

In your template:

<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 flowFiles}}
        File name: {{file.name}}
    {{/each}}
</script>

See JSBin Example