如何使用KnockoutJS数据绑定将使用GridFS的已上传文件的信息显示到表中

Question

How can I display information of an uploaded file (File Name, File Size, Date Uploaded) to a table in an express page? I am using knockoutJS as the front-end. The uploaded files are uploaded to a MongoDB database using GridFS.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <thead> <tr> <th class="col-sm-4">File Name</th> <th class="col-sm-2">File Type</th> <th class="col-sm-3">File Size</th> <th class="col-sm-2">Date of Upload</th> <th class="col-sm-1">Controls</th> </tr> </thead> <tbody data-bind=""> <tr class="gradeX"> <td data-bind="<!-- File Name -->"></td> <td data-bind="<!-- File Type -->"></td> <td data-bind="<!-- File Size -->"></td> <td data-bind="<!-- Date of Upload -->"></td> <td class="center"> <a href="#" data-bind="click: " data-toggle="tooltip" title="View File Details"><i class="fa fa-info-circle text-navy"></i></a> <a href="#" data-bind="click:" data-toggle="tooltip" title="Remove File"><i class="fa fa-trash text-navy"></i></a> <a href="#" data-bind="click:" data-toggle="tooltip" title="Download File"><i class="fa fa-download text-navy"></i></a> </td> </tr> </tbody> 

Thank you in advance! Hoping for a positive response.

Answer 1

Assuming you are binding to a KnockoutJS view model with a populated array (doesn't have to be a ko.observableArray ) named files :

 class ViewModel { constructor() { this.files = [{ fileName: "A", fileType: "B", fileSize: 1, dateOfUpload: "2018-03-14" }, { fileName: "C", fileType: "D", fileSize: 2, dateOfUpload: "2018-03-15" }]; this.viewFileDetails = this.viewFileDetails.bind(this); this.removeFile = this.removeFile.bind(this); this.downloadFile = this.downloadFile.bind(this); } viewFileDetails() { return; } removeFile() { return; } downloadFile() { return; } } const vm = new ViewModel(); ko.applyBindings(vm); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <table> <thead> <tr> <th class="col-sm-4">File Name</th> <th class="col-sm-2">File Type</th> <th class="col-sm-3">File Size</th> <th class="col-sm-2">Date of Upload</th> <th class="col-sm-1">Controls</th> </tr> </thead> <tbody data-bind="foreach: files"> <tr class="gradeX"> <td data-bind="text: fileName"></td> <td data-bind="text: fileType"></td> <td data-bind="text: fileSize"></td> <td data-bind="text: dateOfUpload"></td> <td class="center"> <a href="#" data-bind="click: $root.viewFileDetails" data-toggle="tooltip" title="View File Details"><i class="fa fa-info-circle text-navy"></i></a> <a href="#" data-bind="click: $root.removeFile" data-toggle="tooltip" title="Remove File"><i class="fa fa-trash text-navy"></i></a> <a href="#" data-bind="click: $root.downloadFile" data-toggle="tooltip" title="Download File"><i class="fa fa-download text-navy"></i></a> </td> </tr> </tbody> </table>