Ember.js Wertebindung beim Hochladen von HTML5-Dateien
Ich bin nicht weit davon entfernt, den Datei-Upload mit Ember-Daten zum Laufen zu bringen. Den Wert bekomme ich aber nicht richtig. Unter dem entsprechenden Code.
Dies ist die 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>
Wie Sie in der sehen könnenHTML Teil ist, dass ich versuche, den Bildinhalt an das Landcode-Modellattribut Bild zu binden. Versuchte es auch ohne Hauptstadt L.
Ich glaube, ich kann das Bild nicht als solches binden, weil es ein benutzerdefiniertes Ansichtsobjekt ist. Und normalerweise würde es auch automatisch binden, denke ich. Vielleicht mache ich nur ein paar Dinge zweimal.
Verweise:
http://emberjs.com/api/classes/Ember.Binding.html
http://devblog.hedtek.com/2012/04/brief-foray-into-html5-file-apis.html
Wie: Hochladen von Dateien mit ember.js
http://discuss.emberjs.com/t/file-uploads-is-there-a-better-solution/765