如何knockout.js執行foreach循環爲多行和列的列表

Question

我讀過關於在淘汰賽JS每個函數，但我試圖執行一個地方有3行，打完了一行3個用戶被填充，淘汰應該去下一行並填充它，我如何實現這一目標？

Answer 1

您需要根據用戶的索引對用戶進行分組。最終目標是創建一個數組數組，其中內部數組包含每列的數據。您可以創建一個computed屬性是這樣的：

var viewModel = function() { 
    var self = this; 

    self.users = [ 
    { name: "name 1"}, 
    { name: "name 2"}, 
    { name: "name 3"}, 
    { name: "name 4"}, 
    { name: "name 5"}, 
    { name: "name 6"}, 
    { name: "name 7"}, 
]; 

    // this array looks: [[user1,user2,user3], [user4,user5,user6]] 
    self.groupedUsers = ko.computed(function() { 
    var rows = []; 

    self.users.forEach(function(user, i) { 
     // whenever i = 0, 3, 6 etc, we need to initialize the inner array 
     if (i % 3 == 0) 
     rows[i/3] = []; 

     rows[Math.floor(i/3)][i % 3] = user; 
    }); 

    return rows; 
    }); 
}; 

ko.applyBindings(new viewModel()); 

而在你的HTML：

<table> 
    <tbody data-bind="foreach: groupedUsers"> 
    <tr data-bind="foreach: $data"> 
     <td data-bind="text: name"> 
     </td> 
    </tr> 
    </tbody> 
</table> 

$data這裏是在上下文中的內部陣列。 You can read about binding context here.

Here's a fiddle for testing

---

CSS選擇：

我不是專家，但這裏的關鍵是你是否爲每個row一個container。如果您在每行之間沒有分隔符，則可以使用純粹的css來實現此目的。您可以在用戶容器上使用float: left，並根據屏幕大小和容器寬度計算每行用戶數。

如果您使用類似bootstrap或foundation這樣的框架，可以使用網格類來提供幫助，可以使用相同的參數。您將包含row類中的所有column s，網格會根據您根據設備級要求設置的屏幕大小和自定義col-md和col-sm類自動調整。