javascript - HTML5 ファイルのアップロードを使用した Ember.js 値バインディング

Question

ファイルのアップロードが Ember-data で動作するようになるまで、私はそれほど遠くありません。しかし、値のバインディングが正しくありません。関連するコードの下。

これは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部分でわかるように、imagecontent を Landcode モデル属性の画像にバインドしようとしています。大文字のLなしでも試してみました.

カスタムビューオブジェクトなので、画像をそのままバインドできないと思いますか? また、通常は自動的にバインドされると思います。たぶん、私はいくつかのことを2回行っているだけです。

参考文献:

score 10 · Accepted Answer

コードを次のように更新しました。

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ます。したがって、次を使用してビューでモデルプロパティをバインドできます。

{{view App.UploadFile name="image" file=image }}

Ember.runアプリをテストするときに問題がないことに慣れています。

そのjsfiddle http://jsfiddle.net/marciojunior/LxEsF/を見てください

入力を埋めて保存ボタンをクリックするだけです。ブラウザのコンソールに、サーバーに送信されるデータが表示されます。

javascript - HTML5 ファイルのアップロードを使用した Ember.js 値バインディング

2 に答える 2

Related

Reference