Ember.js 值绑定与 HTML5 文件上传 [英] Ember.js value binding with HTML5 file upload
问题描述
我离使用 Ember-data 上传文件不远了.但我没有得到正确的价值绑定.在相关代码下方.
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.
这是 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>
正如您在 HTML 部分所看到的，我尝试将图像内容绑定到 Landcode 模型属性图像.没有大写 L 也试过了.
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.
参考:
http://devblog.hedtek.com/2012/04/brief-foray-into-html5-file-apis.html
http://Discussion.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]);
}
});
在 App.UploadFile 中，我没有直接引用控制器，而是设置了 file 属性.所以你可以绑定你的模型属性，使用视图:
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 }}
Ember.run 用于测试应用程序时没有问题.
The Ember.run is used to you don't have problems when testing the app.
请看看那个 jsfiddle http://jsfiddle.net/marciojunior/LxEsF/
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屋！
