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-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
действия. Я понятия не имею, почему. Я беру эту линию, она работает снова.
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, происходит обратное. Я открыт для других способов сделать это в Эмбере, я просто не могу понять, что я делаю, это ломает ситуацию.
ли получить называется 'didUpload' обратного вызова? – Kingpin2k
Yep didUpload на file-uploader.js вызывается, но fileUploadComplete на obj-form.js не получает действие. –