2015-08-14 6 views
1

Update нижеEmber множественного sendAction неудача

Вот интересная один. У меня есть шаблон, который содержит компонент формы и шаблоны, которые формируют компоненту также включают в себя компонент:

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

Файл загрузчик использует ember-uploader и он прекрасно работает. Я использовал свои события для совершения звонков sendAction, чтобы сообщить контроллеру obj-формы, что все происходит, IE передает процент хода загрузки и указывает, когда загрузка завершена.

Если, однако, я добавляю еще один sendAction, по какой-либо причине obj-form никогда не получает событие для onComplete. Независимо от того, как я это пробовал, это просто никогда не бывает - ошибок нет.

file-uploader компонент вызывается в шаблоне OBJ-формы следующим образом:

{{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: ложное к контроллеру obj-form, и это:

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

Я использую {{#if isUploading}}, чтобы показать/скрыть индикатор прогресса.

Я добавил:

this.set('uploadInProgress', false); 

метода obj-formfileUploadComplete() и добавил этот метод:

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 действия. Я понятия не имею, почему. Я беру эту линию, она работает снова.

UPDATE ok Я нашел что-то новое. Это не sendAction что ломает его, именно эта линия в Obj-form.js:

this.set('uploadInProgress', 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, происходит обратное. Я открыт для других способов сделать это в Эмбере, я просто не могу понять, что я делаю, это ломает ситуацию.

+0

ли получить называется 'didUpload' обратного вызова? – Kingpin2k

+0

Yep didUpload на file-uploader.js вызывается, но fileUploadComplete на obj-form.js не получает действие. –

ответ

1

Не ответ еще, но не соответствует комментариям правильно ... this не требуется в цепочке зависимостей, еще проще изменить это на псевдоним.

От

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

Для

isUploading: Ember.computed.alias('uploadInProgress') 
Смежные вопросы