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

现场看到示例

基本上我在这里做的是将流对象保存为组件属性。 flow对象的files属性是要上传的文件数组。一旦我们拖放或 select 多个文件上传 files 数组就会更新。我们可以在控制台上看到它。日志记录代码是通过 filesSubmitted 事件添加的。

从 handlebars 表达式中，每个文件都是从文件队列中迭代的。最初它是空的，但后来当它被填充时它不会显示在 html 上。 出于某种原因，数据绑定无法正常工作。

Answer 1

您的 JSFiddle 的问题只是（/曾经）您将 text/plain 文件引用为 JavaScript。正如我 asked here，并非每个文件都可以在 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。

查看 the new JSFiddle 和所有 console.log() 语句。控制台中的 files added、file added 和 submitted 日志告诉我，一旦您使用了正确的文件，代码中的所有内容都可以正常工作。 PROTip：始终检查您的控制台是否有错误。

Answer 2

在您的组件逻辑中：

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 Example

将 Flow JS 与 Ember JS 集成 - 数据未绑定

Integrating Flow JS with Ember JS - Data not Binded

ember.js

flow-js

HTML

JS