0

有人可以告诉我如何为一个 viewModel 的 observableArray 创建一个淘汰赛表，如下所示：

我知道您使用 foreach 绑定和所有这些，但我需要每 5 个数组项创建一个新的 TR 行。我需要表格只有这么远，并且基本上已经对齐了复选框项目。我让它在没有表格的情况下工作，只需向 div 添加一堆复选框（但复选框并未全部排列），但我想要一个表格来很好地保持单元格中的内容排列。

这是我发布的一篇文章，其中包含我所做的一些代码，但我试图将它们全部放在一个 TR 中，但这不起作用，这是另一个试图做类似但不使用淘汰赛的人......

我知道如何使用常规 jquery 和外部模板引擎来做我想做的事，但是如果有一个很好的淘汰绑定模板方式来做这一切，我会尽量远离 jquery。

我可能会在表格内容中添加一些引导类，但不确定，我也将这个框架用于我网站的其他部分。但更多地关注淘汰赛的东西。

第1条

第二条

function someModel() {
    var self = this;
    self.items = ko.observableArray([]); 
}

数组项是这样的类：

function item(name, id) {
    var self = this;
    self.Name = name;
    self.Id = id;
}
4

1 回答 1

2

当您需要更复杂的数据结构时，我建议使用依赖的 observable 来完成。我假设您想要一系列行，每行最多 5 个 tds。

function someModel() {
    var self = this;
    self.items = ko.observableArray([]);
    self.items_grouped = ko.computed(function(){
        var grouped = [];
        var itemlist = self.items();
        for(var i = 0; i < itemlist.length; i+=5){
            var row = [];
            grouped.push(row);
            for(var j = 0; j < 5; ++j){
                row.push(itemlist[i+j]);
            }
        }
        return grouped;
    });
}

<table>
    <tbody data-bind="foreach: items_grouped">
        <tr data-bind="foreach: $data">
            <td>
                <span data-bind="text: Name"></span>
                <span data-bind="text: Id"></span>
            </td>
        </tr>
    </tbody>
</table>

您当然可以使用手头上的任何库来使集群实现更简洁。附带说明一下，使用表格进行布局几乎总是一个坏主意。

于 2013-01-24T06:02:55.443 回答