如何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类自动调整。