Question

以下更新

这是一个有趣的。我有一个包含表单组件的模板，该表单组件的模板还包含一个组件：

NewObj.hbs -> obj-form.js / obj-form.hbs -> file-uploader.js

文件上传器使用ember-uploader，效果很好。我使用它的事件进行sendAction调用，告诉obj-form控制器事情正在发生，IE传递上传进度百分比并指示上传完成的时间。

但是，如果我再添加一个sendAction，由于某种原因，obj-form永远不会收到onComplete的事件。无论我如何尝试，它都不会发生 - 任何地方都没有错误。

在obj-form模板中调用file-uploader组件，如下所示：

{{file-uploader
      url="/uploads"
      onProgress="fileUploadProgress"
      onComplete="fileUploadComplete"
      value=newProjectDownloadFile}}

file-uploader.js本身看起来像这样：

App.FileUploaderComponent = EmberUploader.FileField.extend({
  url: '',

  onProgress: 'onProgress',
  onComplete: 'onComplete',

  filesDidChange: function(files) {
    var uploadUrl = this.get('url');
    var that = this;
    var uploader = EmberUploader.Uploader.create({
      url: uploadUrl
    });

    uploader.on('progress', function (e) {
      that.sendAction('onProgress', e);
    });

    uploader.on('didUpload', function (response) {
      that.sendAction('onComplete', response);
    });
    if (!Ember.isEmpty(files)) {
      uploader.upload(files[0]);
    }
  }

});

obj-form.js在操作哈希中有这些方法：

fileUploadProgress: function (e) {
    this.set('uploadPercentage', e.percent.toFixed(2));
},
fileUploadComplete: function (response) {
  this.set('newProjectDownloadFileUrl', response.url);
  this.set('newProjectDownloadFileName', response.fileName);
  this.send('addDownload');
},

效果很好。但是我想在上传时只显示进度条，上传完成后就会消失。我将属性uploadInProgress：false添加到obj-form控制器，并且：

isUploading: function () {
  return this.uploadInProgress;
}.property('this.uploadInProgress')

我使用{{#if isUploading}}来显示/隐藏进度条。

我补充说：

 this.set('uploadInProgress', false);

到obj-form fileUploadComplete()方法，并添加了这个新方法：

fileUploadStart: function () {
  this.set('uploadInProgress', true);
},

我将file-uploader组件调用修改为：

{{file-uploader
      url="/connect/projectDownloads/file"
      onStart="fileUploadStart"
      onProgress="fileUploadProgress"
      onComplete="fileUploadComplete"
      value=newProjectDownloadFile}}

并将file-uploader.js更改为：

App.FileUploaderComponent = EmberUploader.FileField.extend({
  url: '',

  onStart: 'onStart',
  onProgress: 'onProgress',
  onComplete: 'onComplete',

  filesDidChange: function(files) {
    var uploadUrl = this.get('url');
    var that = this;
    var uploader = EmberUploader.Uploader.create({
      url: uploadUrl
    });

    uploader.on('progress', function (e) {
      that.sendAction('onProgress', e);
    });

    uploader.on('didUpload', function (response) {
      that.sendAction('onComplete', response);
    });
    if (!Ember.isEmpty(files)) {
      that.sendAction('onStart', true);
      uploader.upload(files[0]);
    }
  }

});

我已尝试将that.sendAction('onStart', true);位放在file-uploader.js中的所有位置，但如果该行存在，则obj-form控制器永远不会收到onComplete操作。我完全不知道为什么。我把那条线拿出来，它再次起作用。

更新确定我找到了新的东西。这不是sendAction打破它，它是obj-form.js中的这一行：

this.set('uploadInProgress', true);

出于某种原因，当我将其设置为true时，一切都崩溃了。我想知道我是否在尝试做这项工作的方式出错？

可能与didInsertElement有关吗？我注意到当我将uploadInProgress设置为true时会触发 - 因为该属性用于确定进度条是否出现在页面上。也许我正在使用didInsertElement错误？这是我的didInsertElement和willDestroyElement：

   didInsertElement: function() {
   // console.log('didInsertElement');

   this.set( 'postType', this.get( 'content' ).get( 'postType' ) );
   this.set( 'projectDownloads', this.get( 'content' ).get( 'projectDownloads' ) );
   this.set( 'projectLinks', this.get( 'content' ).get( 'projectLinks' ) );
   this.set( 'published', this.get( 'content' ).get( 'published' ) );
   Ember.addObserver( this.get( 'content' ), 'postType', this, this.postTypeDidChange );
   Ember.addObserver( this.get( 'content' ), 'projectDownloads', this, this.projectDownloadsDidChange );
   Ember.addObserver( this.get( 'content' ), 'projectLinks', this, this.projectLinksDidChange );
   Ember.addObserver( this.get( 'content' ), 'published', this, this.publishedDidChange );
 },

  willDestroyElement: function() {
    console.log('willDestroyElement');
    Ember.removeObserver( this.get( 'content' ), 'postType', this.postTypeDidChange );
    Ember.removeObserver( this.get( 'content' ), 'projectDownloads', this.projectDownloadsDidChange );
    Ember.removeObserver( this.get( 'content' ), 'projectLinks', this.projectLinksDidChange );
    Ember.removeObserver( this.get( 'content' ), 'published', this.publishedDidChange );
  }

我已经尝试将isUploading修改为您推荐的别名样式，但这没有任何帮助。这个想法是当它设置为true时，它会使进度条出现并且fileupload表单消失。然后当它设置为false时，反向发生。我对其他方法持开放态度，以便在Ember中实现这一点，我只是无法弄清楚我正在做什么，这就是破坏事物。

Answer 1

还没有答案，但却无法正确评论... this在依赖关系链中是不必要的，更容易将其更改为别名。

这

isUploading: function () {
  return this.uploadInProgress;
}.property('this.uploadInProgress')

要

isUploading: Ember.computed.alias('uploadInProgress')

Ember多个sendAction失败

1 个答案: