在淘汰赛中渲染一张大 table-Java 学习之路

我试图在淘汰赛中呈现一张 table . 代码可以工作，但随着行数和列数的增加，渲染时间变得非常长 . 罪魁祸首似乎是通知订户并实际执行绑定 . 我导致淘汰赛做了很多事情 . 这个表字面上没有互动 . 它纯粹只是为了显示数据 . 我希望能够实现这一点，而无需引入另一个模板引擎，只需使用Knockout.js可用的 data-bind 属性，但我已经尝试过，似乎没什么好看的 . 我有两个可观察的数组，一个用于 Headers ，另一个用于数据 . 数据数组是一个数组数组，因为我必须单独构建每一行 .

<table>
  <thead>
    <tr>
      <!--ko foreach: headers -->
          <th data-bind="{'text': displayName}"></th>
      <!-- /ko -->
    </tr>
  </thead>
  <tbody data-bind="foreach: row">
    <tr class="form_row">
      <!-- ko foreach: question -->
      <!-- ko if: Type === "image" -->
      <td>
        <a data-bind="attr: {'href': $data.Value, 'target': '_blank'}">
          <img class="thumbnail-img" data-bind="  attr: {'src': $data.Value}" />
        </a>
      </td>
      <!-- /ko -->
      <!-- ko if: Type !== "image" -->
          <td data-bind="{'text': Value}"></td>
      <!-- /ko -->
      <!-- /ko -->
    </tr>
  </tbody>
</table>

您可以使用此JsFiddle运行类似于我的示例 . http://jsfiddle.net/LkqTU/27820/

1 回答

我的Table binding显示了如何使用Knockout快速生成表格 . 基本方法是使用字符串构造表，然后使用 innerHTML 将所有内容一次性添加到DOM . 您可能还可以使用某种基于字符串的模板引擎来执行此操作，如Knockout template documentation中所述 .

我已将您的示例转换为使用 table ：

<table data-bind="table: tableBinding($data)"></table>

使用Javascript：

vm.tableBinding = function(vm) {
    return {
        columns: vm.headers.length,
        data: vm.row,
        header: function(col) {
            return vm.headers[col].displayName;
        },
        dataItem: function(row, col, data) {
            var item = data[row].question[col],
                value = ko.utils.escape(item.Value);
            if (item.Type === "image") {
                return ko.utils.safeString('<a href="' + value + '" target="_blank"><img class="thumbnail-img" src="' + value + '" /></a>');
            } else {
                return ko.utils.safeString(value);
            }
        }
    };
};

jsFiddle：http://jsfiddle.net/mbest/b80t0cL8/

回复于 2024-05-14T18:14:41+08:00

在淘汰赛中渲染一张大 table

1 回答

相关问题