Итак, пару недель назад я сделал пост о JavaScript onChange file input и, поскольку я работаю над Ember.js, я подумал, что покажу вам, ребята, как это сделать в Ember.js для тех, кто любопытны.
Одна из причин, по которой вы можете захотеть научиться делать это в Ember.js, — модульное тестирование. Это была одна из конкретных причин, по которой мне пришлось научиться делать это в Ember, потому что я не мог протестировать файловый объект в функции onChange.
// sendData.html
<input id=”FileInput”
type=”file”
accept=”image/png,image/jpeg”
onchange={{action send ‘onChangeFile’}}
>
// sendData.js
let onChangeFile() {
let fileInput = Ember.$(“#clientCardInput”)[0]
let image = fileInput.files[0]
this.controller.set(‘model.image’, image)
}
Если вы читали мой пост о версии JavaScript, это выглядело бы почти идентично. Единственная разница в том, что мы используем ссылку Ember для доступа к DOM, Ember.$, которая является псевдонимом $ jQuery, потому что Ember построен на jQuery.
Мы также используем наш контроллер для установки изображения, чтобы наш модульный тест мог ссылаться на него при создании или рендеринге этого компонента. Ключевым моментом здесь является то, что мы устанавливаем данные нашей модели model.image на изображение, которое мы захватили с помощью Ember.$. Если бы мы сделали это способом JavaScript, модульный тест Ember не имел бы никакой ссылки на model.image и, следовательно, не имел бы возможности проверить, был выбран файл или нет.
