Knockout.js和分块实用程序

Question

Id like to create some sort of function that will chunk an array into a certain amount and display those in a row. Below I have an array called pools that would show all pools. Id like to show three per row though. The javascript function below works in code, but how would you do this with 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

You could create an array of objects where each object contains an array of the actual items in your "array" and then a nested loop in 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

Assuming pools is an observable containing your data, you can make a poolRows computed that calculates based on 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
});

Then:

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