我正在尝试在 knockout 中渲染表格。该代码可以工作,但随着行数和列数的增加,渲染时间变得非常长。罪魁祸首似乎是通知订阅者并实际执行绑定(bind)。我想知道是否有一种方法可以以一种不会导致 knockout 进行如此多事件的方式呈现表格。该表实际上没有交互。它纯粹只是为了显示数据。我希望无需引入另一个模板引擎即可完成此任务,只需使用 Knockout.js 提供的 data-bind
属性即可,但我已经尝试过,但似乎没有什么令人满意的。我有两个可观察的数组,一个用于标题,一个用于数据。数据数组是数组的数组,因为我必须单独构建每一行。
<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/
最佳答案
我的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/
关于knockout.js - 在 knockout 中渲染一张大 table ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33815568/