我需要创建一个Ember组件来选择一个文件.
我的页面将包含多个“上传组件”
我的页面将包含多个“上传组件”
我已经阅读了一个试图实现的帖子：(https://stackoverflow.com/questions/9200000/file-upload-with-ember-data)但是UploadFileView直接链接到控制器.
我想要一些更通用的东西
我想从视图中删除App.StoreCardController.set(‘logoFile’..)依赖关系或从模板传递字段(logoFile)…
有什么想法来改进这个代码？
App.UploadFileView = Ember.TextField.extend({
type: 'file',attributeBindings: ['name'],change: function(evt) {
var self = this;
var input = evt.target;
if (input.files && input.files[0]) {
App.StoreCardController.set('logoFile',input.files[0]);
}
}
});
和模板：
{{view App.UploadFileView name="icon_image"}}
{{view App.UploadFileView name="logo_image"}}
解决方法
我完成了一个完整的例子来展示这个行动
https://github.com/toranb/ember-file-upload
这是基本的手柄模板
<script type="text/x-handlebars" data-template-name="person">
{{view PersonApp.UploadFileView name="logo" contentBinding="content"}}
{{view PersonApp.UploadFileView name="other" contentBinding="content"}}
<a {{action submitFileUpload content target="parentView"}}>Save</a>
</script>
PersonApp.UploadFileView = Ember.TextField.extend({
type: 'file',change: function(evt) {
var self = this;
var input = evt.target;
if (input.files && input.files[0]) {
var reader = new FileReader();
var that = this;
reader.onload = function(e) {
var fileToUpload = reader.result;
self.get('controller').set(self.get('name'),fileToUpload);
}
reader.readAsDataURL(input.files[0]);
}
}
});
这是控制器
PersonApp.PersonController = Ember.ObjectController.extend({
content: null,logo: null,other: null
});
最后这里是w / submit事件的视图
PersonApp.PersonView = Ember.View.extend({
templateName: 'person',submitFileUpload: function(event) {
event.preventDefault();
var person = PersonApp.Person.createRecord({ username: 'heyo',attachment: this.get('controller').get('logo'),other: this.get('controller').get('other') });
this.get('controller.target').get('store').commit();
}
});
