Question

我想创建某种类型的函数，将数组块化为一定数量并将其显示在一行中。下面我有一个名为pool的数组，它将显示所有池。我喜欢每行显示三个。下面的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

您可以创建一个对象数组，其中每个对象包含“数组”中实际项目的数组，然后是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是包含您的数据的可观察对象，您可以根据poolRows生成pools计算结果：

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和chunking实用程序

2 个答案: