dart - 如何将 FileList 绑定(bind)到 Dart Polymer 中的 Observable？

Question

我正在尝试将文件上传与 Dart & Polymer 结合使用。考虑以下文件:

我的上传.html

<polymer-element name="my-upload">
  <template>
    <style></style>
    <input type="file" id="uploader" bind-files="{{files}}" on-change="{{uploadFiles}}" multiple>
  </template>
  <script type="application/dart" src="my-upload.dart"></script>
</polymer-element>

我的上传.dart

@CustomTag('my-upload')
class MyUpload extends PolymerElement {        
  @observable FileList files;

  MyUpload.created() : super.created();

  void uploadFiles(event, details, target) {        
    print(files);
  }
}

uploadFiles 中的打印语句始终打印 null。看来，fileList 没有绑定(bind)到可观察对象。有没有办法解决这个问题？我必须使用绑定(bind)文件以外的其他语句吗？

当然，有一种解决方法，但我认为它没有捕获重点:

我的上传.dart

@CustomTag('my-upload')
class MyUpload extends PolymerElement {  
  FileUploadInputElement uploader;

  MyUpload.created() : super.created() {
    uploader = $['uploader'];    
  }

  void uploadFiles(event, details, target) {        
    print(uploader.files);
  }
}

有任何想法吗？

Answer 1

FileList是不可观察的。
与 @observable注释，您只能观察文件是否已更改，以便它指向不同的 FileList，但不能指向 FileList 内的更改。

在您的示例中，我看不出一个令人信服的理由，为什么您需要一个可观察的 FileList。
你想用它做比我们从示例中看到的更多的事情吗？

你可以简化你的代码。我不知道这在您的用例中是否有意义:

@CustomTag('my-upload')
class MyUpload extends PolymerElement {  

  void uploadFiles(event, details, target) {        
    FileUploadInputElement uploader = $['uploader'];   
    print(uploader.files);
  }
}

甚至更短

@CustomTag('my-upload')
class MyUpload extends PolymerElement {  

  void uploadFiles(event, details, target) {        
    print($['uploader'].files);
  }
}