根据可观察的阵列长度，重复视图代码？-knockout.js

需要帮助根据observableArray长度创建表

observableArray-页面是一个带有数字的数组。 现在我想创建一个表行，每行有10个数字。对于第11个元素，我必须从新行插入。因此，必须在10个元素之后创建新行

所以我的桌子应该是这样的：

1   2   3   4   5   6   7   8   9   10

11  12  13  14  15  16  17  18  19  20

21  22  23

视图模型代码为：

function Pagination() {

    var self = this;
    self.TotalPageCount = ko.observable("23");
    self.Pages = ko.observableArray(['1','2','3','4','5','6','7','8','9','10',
                    '11','12','13','14','15','16','17','18','19','20',
                                    '21','22','23' ]);

};

查看代码：

<table id="pagerTable">
    <tbody data-bind="foreach: Pages.length / 10"> 
        <tr>  <!-- have to create table row for every 10 elements  -->
           <td>
                <a data-bind="attr:{ 'id': $index }, text: $data " ></a> 
           </td>
        </tr>
    </tbody>
</table>

提前谢谢。

看一看

我目前为您提供的解决方案是将其分解为数组块并显示它

首先把它分成几块，看看里面有什么。多亏了

@dentaku

//Convert your table to Chunk of Arrays
function TableModel(pages) {

    var longArray = pages;
    var smallerArrays = []; // will contain the sub-arrays of 10 elements each
    var arraySize = 10;
    for (var i = 0; i < Math.ceil(longArray.length / arraySize); i++) {
        smallerArrays.push(longArray.slice(i * arraySize, i * arraySize + arraySize));
    }
    return smallerArrays;
}

---

你可以找到一个

嗨，我试过小提琴的例子。我已经根据我的要求修改了JSFIDLE。现在，我有一个包含3行的表数组，其中每行有10项。如何循环并显示内容，以便在数组的每行中有10列对应10项。因此，结果表应该有3行10列。有人能帮我修改JSFIDLE吗？谢谢终于开始工作了。以下是更新后的JSFIDLE：

//Convert your table to Chunk of Arrays
function TableModel(pages) {

    var longArray = pages;
    var smallerArrays = []; // will contain the sub-arrays of 10 elements each
    var arraySize = 10;
    for (var i = 0; i < Math.ceil(longArray.length / arraySize); i++) {
        smallerArrays.push(longArray.slice(i * arraySize, i * arraySize + arraySize));
    }
    return smallerArrays;
}

<table id="pagerTable" data-bind="foreach: Tables">
    <tbody>
        <tr>
            <!-- have to create table row for every 10 elements -->
            <td> <a data-bind="attr:{ 'id': $index }, text: $data "></a> 
            </td>
        </tr>
    </tbody>
</table>

function AppViewModel() {
    this.TotalPageCount = ko.observable("23");
    this.Pages = ko.observableArray(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
        '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
        '21', '22', '23']);
    this.Tables = TableModel(this.Pages());
    console.log(this);
}