Question

需要帮助才能根据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>

任何人都可以帮我解决问题吗？ JSfiddle：http://jsfiddle.net/ondacinaynakalkur/w928F/1/

小提琴链接只打印整个数组内容。我希望数组内容显示在一个表中，每行包含10个元素：

1   2   3   4   5   6   7   8   9   10

11  12  13  14  15  16  17  18  19  20

21  22  23

提前致谢。

Answer 1

看看FIDDLE

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

首先将其分成块，然后查看split-array-into-chunks。感谢@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;
}

然后让我们将HTML代码更改为： -

<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);
}

您可以找到Working Version Here

根据observableArray长度重复视图代码？ - knockout.js

1 个答案: