knockout.js和chunking實用程序

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

假設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 --> 

Answer 2

您可以創建其中每個對象都包含在你的「陣列」的實際項目的數組對象的數組，然後一個嵌套在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">`