Ember 多个 sendAction 失败

Question

下方更新

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

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

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

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

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

{{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 时，它​​会显示进度条并且文件上传表单消失。然后，当它被设置为 false 时，就会发生相反的情况。我对在 Ember 中实现这一点的其他方法持开放态度，我只是不知道我在做什么会破坏事情。

Answer 1

还没有答案，但无法正确放入评论...this 在依赖链中不是必需的，更简单的是将其更改为别名。

来自

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

到

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