Javascript 使用KnockoutJs生成一个表with子句，使用内联模板每隔这么多项创建一个新行

有人能告诉我如何在knockout中为viewModel的observableArray创建一个表，如下所示：

我知道您使用了foreach绑定等，但我需要每5个数组项创建一个新的TR行。我需要的表只有这么远的跨越和有对齐的复选框项目基本上。我让它在没有表格的情况下工作，只是在一个div中添加了一堆复选框（但复选框并没有全部对齐），但我希望有一个表格可以使单元格中的内容很好地对齐

这里有一篇文章，我发布了一些代码，但我试图把它们都放在一个TR中，但这不起作用，这里有另一个人试图做一些类似的事情，但没有使用击倒

我知道如何使用常规jquery和外部模板引擎来完成我想要的事情，但如果有一种很好的击倒绑定模板的方式来完成这一切，我会尽量远离jquery

我可能会将一些引导类添加到表中，但我不确定，我的网站的其他部分也在使用这个框架。但更多的注意力放在淘汰赛上

数组项是如下所示的类：

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

---

当您需要更复杂的数据结构时，我建议使用一个依赖的可观察对象来完成。我假设您需要一系列行，每个行最多有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>

函数someModel（）{
var self=这个；
self.items=ko.observearray（[]）；
self.items\u grouped=ko.computed（函数（）{
风险值=[]；
var itemlist=self.items（）；
对于（变量i=0；i

当然，您可以使用手头上的任何库使集群实现更干净。

---

另一方面，使用表格进行布局几乎总是一个坏主意。

我将尝试一下。但是为什么使用表格是一个不好的布局方法呢。还有什么，我怎样才能在不使用表的情况下得到一堆复选框？代码多久调用一次这个计算的可观测值？似乎它会经常调用它，因为computed observable是最顶层的绑定，所以knockoutjs必须每隔几秒钟调用一次，以确保它具有正确的计算列表。是否有方法使DependentToServable依赖于items数组的更改？顺便说一下，DependentToServable现在是ko.computed。您需要了解ko.computed的工作原理。其要点是因为我正在访问computed函数中的self.items（），knockout知道存在依赖项，并且只会在self.items发生更改时重新计算它。整个故事要复杂得多，但总的来说，你可以相信它能正确地工作，而且不需要任何轮询。至于布局，有很多不同的方法可以做到这一点。我的css fu很弱，但浮动可以完成这项工作。

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>