enlace de atributo de entrada en Ember.View

I'd like to implement a file uploader like this http://www.html5rocks.com/en/tutorials/file/dndfiles/ :

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

But I can't figure out how to retrieve the file list in my ember view. I tried something like :

App.Uploader = Em.View.extend({ files : [] })

with a template :

<input type="file" {{bindAttr name="files"}} multiple>

Pero no funciona.

Algunas ideas ?

Saludos,

Jaonary

preguntado el 09 de marzo de 12 a las 13:03

1 Respuestas


This does the work and is much more ember-idiomatic:

<script type="text/x-handlebars">
    {{#view App.FileSelectionView}}
        <input type="file" id="files" name="files[]" {{action "fileSelectionChanged" on="change"}} multiple/>
        <output id="list">
            <ul>
                {{#each files}}
                    <li><strong>{{name}}</strong> ({{type}}) - {{size}} bytes, last modified: {{date}}</li>
                {{/each}}
            </ul>
        </output>
    {{/view}}
</script>

<script type="text/javascript">
    App = Ember.Application.create();

    App.FileSelectionView = Ember.View.extend({
        files: null,

        fileSelectionChanged: function(evt) {
            var inputFiles = evt.target.files;
            var files = [];
            for (var i = 0, f; f = inputFiles[i]; i++) {
                files.pushObject({
                    name: escape(f.name),
                    type: f.type || 'n/a', 
                    size: f.size,
                    date: f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a'
                });
            }
            this.set('files', files);
        }
    });
</script>

You have to create a view with a method which will handle the input's change event. After that, you're done... You can render each file thanks to ember's bindings in the handlebars template.

respondido 09 mar '12, 14:03

Yes I got it working by changing the function fileSelectedChanged to change event handler directly. - jrabary

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.