Интеграция Flow JS с Ember JS - данные не связаны

Question

Я пытаюсь интегрировать 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. Привязка данных по какой-то причине не работает.

Answer 1

В вашей логике компонента:

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

});

В вашем шаблоне:

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

Смотрите пример JSBin

Answer 2

Проблема с вашим JSFiddle просто (/ была), что вы ссылались на text/plain файл как JavaScript. Как я здесь просил, не каждый файл можно использовать в JSFiddle, и GitHub не нравится, когда его используют как псевдо-CDN для ленивых.

Другими словами: эта ошибка

Uncaught ReferenceError: Flow is not defined

является результатом этой ошибки

Refused to execute script from 'https://raw.githubusercontent.com/flowjs/flow.js/master/dist/flow.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

и может быть исправлено с помощью

https://rawgithub.com

или версия MaxCDN

http://rawgit.com/

на месте ветки файл URl.

Посмотрите на новый JSFiddle со всеми console.log() заявления. files added, file added а также submitted журналы в консоли говорят мне, что все в вашем коде работает нормально, как только вы получили нужный файл. Совет: всегда проверяйте консоль на наличие ошибок.