Question

如何在快递页面中的表格中显示上传文件的信息（文件名，文件大小，上传日期）？我使用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

假设您使用名为ko.observableArray的填充数组（不必是files）绑定到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将上载文件的信息显示到表中

1 个答案: