Как отобразить информацию о загруженных файлах, используя GridFS, в таблицу, используя привязку данных KnockoutJS

Question

Как я могу отобразить информацию о загруженном файле (имя файла, размер файла, дата загрузки) в таблицу на экспресс-странице? Я использую knockoutJS в качестве внешнего интерфейса. Загруженные файлы загружаются в базу данных MongoDB с использованием 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>

Заранее спасибо! Надеемся на положительный ответ.

Answer 1

Предполагая, что вы привязываетесь к модели представления KnockoutJS с заполненным массивом (необязательно ko.observableArray) названный 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>