Ember.js值绑定与HTML5文件上传 [英] Ember.js value binding with HTML5 file upload
问题描述
这是App.js
App.LandcodeNewRoute = Ember.Route.extend（{
model：function（）{
return this.store.createRecord（'landcode'）;
}，
操作：{
saveLandcode：function（）{
this.currentModel.save（）;
}
}
}）;
// REST&模型
App.ApplicationAdapter = DS.RESTAdapter.extend（{
namespace：'api'
}）;
App.Store = DS.Store.extend（{
adapter：'App.ApplicationAdapter'
}）;
App.Landcode = DS.Model.extend（{
code：DS.attr（'string'），
image：DS.attr（'string'）
}）;
//查看
App.UploadFile = Ember.TextField.extend（{
tagName：'input'，
attributeBindings：['name']，
type：'file'，
change：function（e）{
var reader，that;
that = this;
reader = new FileReader（）;
reader.onload = function（e）{
var fileToUpload = e.target.result;
console.log（e.target.result）; //这样将控制台与图像内容
console.log（that.get（'controller'））; //输出：class {imageBinding：Binding，
that.get（'controller'）。set .get（'name'），fileToUpload）;
};
return reader.readAsText（e.target.files [0]）;
}
}）;
HTML
< script type =text / x-handlebarsdata-template-name =landcode / new>
代码：{{input value = code}}< br />
图片：{{view App.UploadFile name =imageimageBinding =Landcode.image}}
< button {{action'saveLandcode'}}>保存< / button>
< / script>
您可以在 HTML 部分看到，我尝试绑定图像内容到Landcode模型属性图像。尝试它也没有资本L。
我认为我无法绑定图像，因为它是一个自定义视图对象？而且通常它会自动绑定我想。也许我只是在做一些事情两次。
参考文献：
-
http://devblog.hedtek.com/2012/04/brief-foray-into-html5-file-apis.html
-
http://discuss.emberjs.com/t/file-uploads-is-there-a-better-solution / 765
我将您的代码更新为以下内容：
App.LandcodeNewRoute = Ember.Route.extend（{
model：function（）{
return this.store.createRecord（'landcode'）;
}，
actions：{
saveLandcode：function（）{
this.currentModel.save（）;
}
}
}）;
// REST&模型
App.ApplicationAdapter = DS.RESTAdapter.extend（{
namespace：'api'
}）;
App.Landcode = DS.Model.extend（{
code：DS.attr（'string'），
image：DS.attr（'string'）
}）;
//视图
App.UploadFile = Ember.TextField.extend（{
tagName：'input'，
attributeBindings：['name']，
type：'file'，
file：null，
change：function（e）{
var reader = new FileReader（），
that = this;
reader.onload = function（e）{
var fileToUpload = e.target.result;
Ember.run（function（）{
that.set（'file'，fileToUpload）;
}）;
};
return reader.readAsDataURL（e.target.files [0]）;
}
}）;
在 App.UploadFile 而不是引用控制器直接，我设置文件属性。因此，您可以使用以下视图绑定模型属性：
{{view App.UploadFile name =imagefile =图像}}
Ember.run 用于测试应用程序时没有问题。
请看看那个jsfiddle http://jsfiddle.net/marciojunior/LxEsF/
只需填写输入并点击保存按钮。而您将在浏览器控制台中看到将发送到服务器的数据。
I am not far from it to get the file upload working with Ember-data. But I do not get the value binding right. Below the relevant code.
This is the App.js
App.LandcodeNewRoute = Ember.Route.extend({
model: function () {
return this.store.createRecord('landcode');
},
actions: {
saveLandcode: function () {
this.currentModel.save();
}
}
});
// REST & Model
App.ApplicationAdapter = DS.RESTAdapter.extend({
namespace: 'api'
});
App.Store = DS.Store.extend({
adapter: 'App.ApplicationAdapter'
});
App.Landcode = DS.Model.extend({
code: DS.attr('string'),
image: DS.attr('string')
});
// Views
App.UploadFile = Ember.TextField.extend({
tagName: 'input',
attributeBindings: ['name'],
type: 'file',
change: function (e) {
var reader, that;
that = this;
reader = new FileReader();
reader.onload = function (e) {
var fileToUpload = e.target.result;
console.log(e.target.result); // this spams the console with the image content
console.log(that.get('controller')); // output: Class {imageBinding: Binding,
that.get('controller').set(that.get('name'), fileToUpload);
};
return reader.readAsText(e.target.files[0]);
}
});
HTML
<script type="text/x-handlebars" data-template-name="landcode/new">
Code: {{input value=code}}<br />
Image: {{view App.UploadFile name="image" imageBinding="Landcode.image" }}
<button {{action 'saveLandcode'}}>Save</button>
</script>
As you can see in the HTML part is that I try to bind the imagecontent to the Landcode model attribute image. Tried it also without capital L.
I think I cant bind the image as such, because it is a custom view object? And also normally it would bind automatically I think. Maybe I am just doing some things twice.
References:
http://devblog.hedtek.com/2012/04/brief-foray-into-html5-file-apis.html
http://discuss.emberjs.com/t/file-uploads-is-there-a-better-solution/765
I updated your code to the following:
App.LandcodeNewRoute = Ember.Route.extend({
model: function () {
return this.store.createRecord('landcode');
},
actions: {
saveLandcode: function () {
this.currentModel.save();
}
}
});
// REST & Model
App.ApplicationAdapter = DS.RESTAdapter.extend({
namespace: 'api'
});
App.Landcode = DS.Model.extend({
code: DS.attr('string'),
image: DS.attr('string')
});
// views
App.UploadFile = Ember.TextField.extend({
tagName: 'input',
attributeBindings: ['name'],
type: 'file',
file: null,
change: function (e) {
var reader = new FileReader(),
that = this;
reader.onload = function (e) {
var fileToUpload = e.target.result;
Ember.run(function() {
that.set('file', fileToUpload);
});
};
return reader.readAsDataURL(e.target.files[0]);
}
});
In the App.UploadFile instead of reference the controller directlly, I set the file property. So you can bind your model property, with the view using:
{{view App.UploadFile name="image" file=image }}
The Ember.run is used to you don't have problems when testing the app.
Please give a look in that jsfiddle http://jsfiddle.net/marciojunior/LxEsF/
Just fill the inputs and click in the save button. And you will see in the browser console, the data that will be send to the server.
这篇关于Ember.js值绑定与HTML5文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
