knockout.js 和分块实用程序

Question

我想创建某种函数，将数组分块成一定数量并显示在一行中。下面我有一个名为 pools 的数组，它会显示所有池。不过，我想每行显示三个。下面的 javascript 函数在代码中有效，但是如何使用 knockout.js?

HTML

<!-- ko foreach: pools -->

Javascript

var i,j,temparray,chunk = 10;
for (i=0,j=array.length; i<j; i+=chunk) {
    temparray = array.slice(i,i+chunk);

}

Answer 1

您可以创建一个对象数组，其中每个对象包含您 "array" 中实际项目的数组，然后是 ko 中的嵌套循环。

 var i, j, tempArray = [], chunk = 10;
 for (i=0,j=array.length, k=0; i<j; i+=chunk, k++) {
    temparray[k] = { items: array.slice(i,i+chunk); }
 }

HTML

  `<!-- ko foreach: pools -->
      <div class="row">
      <!-- ko foreach: items -->
           <div class="col">`

Answer 2

假设 pools 是一个包含您的数据的可观察对象，您可以根据 pools:

进行 poolRows 计算

var pools = ko.observableArray([]);

var poolRows = ko.computed(function () {
    var poolRows = [];
    for(var i=0;i<pools().length;i++) {
        var pool = pools()[i];
        if(i % 3 === 0) {
            poolRows.push([]);
        }
        poolRows[Math.floor(i/3)].push(pool);
    }
    return poolRows
});

然后：

<!-- ko foreach: {data: poolRows, as: 'poolRow'} -->
    <!-- ko foreach: {data: poolRow, as: 'pool'} -->
         <!-- pool html here -->
    <!-- /ko -->
<!-- /ko -->

knockout.js 和分块实用程序

knockout.js and chunking utility

javascript

arrays

knockout.js