enlace de atributo de entrada en Ember.View

Question

enlace de atributo de entrada en Ember.View

1 Respuestas

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

jrabary · Answer 1

Me gustaría implementar un cargador de archivos como este 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>

Pero no puedo averiguar cómo recuperar la lista de archivos en mi vista de brasas. Intenté algo como:

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

con una plantilla:

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

Pero no funciona.

Algunas ideas ?

Saludos,

Jaonary

Mike Aski · Answer 2

Esto hace el trabajo y es mucho más ember-idiomático:

<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>

Tienes que crear una vista con un método que manejará la entrada change evento. Después de eso, ya terminaste... Puedes renderizar cada archivo gracias a los enlaces de Ember en la plantilla del manillar.