在Knockout js中创建一个包含多行的表,而不需要推送

Create a table with many rows without push in Knockout js

本文关键字:不需要 包含多 一个 js Knockout 创建      更新时间:2023-09-26

我正试图创建一个有100行的表,但我不想使用推送,因为每次推送都会呈现页面。该表一开始应该是空的,但当我单击某个按钮时,该表将创建所有行。这里的问题是,当我点击按钮时,我看不到行
但我只能设置self.row=ko.obstangleArray()一次?

JS

RowModel = function(numbers) {
    var self = this;
        self.numbers = numbers;
}
TableViewModel = function() {
    var self = this;
        self.rows = null;
    self.createRows = function() {
        var arr = [];
        var numbers = [];
        for(var i=0; i < 100; i++){
            for(var p=0; p < 4; p++){
                numbers[p] = p;
            }
            arr[i] = new RowModel(numbers);
        }
        self.rows = ko.observableArray(arr);
    }
};
ko.applyBindings(new TableViewModel());

HTML

<button data-bind="click: createRows">Create</button>
<table>
<tbody data-bind="foreach: rows">
      <tr>
          <td data-bind="text: numbers[0]"></td
          <td data-bind="text: numbers[1]"></td>
          <td data-bind="text: numbers[2]"></td>
          <td data-bind="text: numbers[3]"></td>
      </tr>
</tbody>
</table>

总是预先创建可观察的数据,并使用函数调用对数据进行设置,例如

self.rows = ko.observable([]);

然后使用设置数据(而不是像你正确地说的那样推送每个数据)

self.rows(arr);

完整的代码在这里:https://jsfiddle.net/brianlmerritt/y0x0wwy5/