如何knockout.js执行foreach循环为多行和列的列表
问题描述:
如何knockout.js执行foreach循环为多行和列的列表
我读过关于在淘汰赛JS每个函数,但我试图执行一个地方有3行,打完了一行3个用户被填充,淘汰应该去下一行并填充它,我如何实现这一目标?
答
您需要根据用户的索引对用户进行分组。最终目标是创建一个数组数组,其中内部数组包含每列的数据。您可以创建一个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.
CSS选择:
我不是专家,但这里的关键是你是否为每个row
一个container
。如果您在每行之间没有分隔符,则可以使用纯粹的css
来实现此目的。您可以在用户容器上使用float: left
,并根据屏幕大小和容器宽度计算每行用户数。
如果您使用类似bootstrap
或foundation
这样的框架,可以使用网格类来提供帮助,可以使用相同的参数。您将包含row
类中的所有column
s,网格会根据您根据设备级要求设置的屏幕大小和自定义col-md
和col-sm
类自动调整。
非常感谢,最好的答案永远 –
我试图实现你的答案,但后来我发现,我正在安排我的个人资料与
@ EshiettOto,五峰创建一个包装' div',然后用'ul'代替'tr':[updated小提琴](http://jsfiddle.net/adigas/5asL91fv/1/)。如果你不想创建一个额外的包装'div',你可以使用knockout的[无容器控制流语法](http://knockoutjs.com/documentation/foreach-binding.html#note-4-using-foreach-没有一个容器元素)像这样:[fiddle](http://jsfiddle.net/adigas/5asL91fv/2/) – adiga