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

Question

如何在快速页面中将上传文件的信息（文件名、文件大小、上传日期）显示到 table？我使用 knockoutJS 作为前端。上传的文件使用 GridFS 上传到 MongoDB 数据库。

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

提前致谢！希望得到积极的回应。

Answer 1

假设您使用名为 files:

的填充数组（不必是 ko.observableArray）绑定到 KnockoutJS 视图模型

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>

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

How to display information of uploaded files using GridFS to a Table using KnockoutJS data-bind

javascript

mongodb

gridfs

knockout.js