Question

我在twitter bootstrap界面中列出房间，如下所示：

<div class="row-fluid">
    <!-- ko foreach: rooms -->
        <!-- ko if: $index() % 4 == 3 -->
            </div><div class="row-fluid">
        <!-- /ko -->
    <span data-bind="text: $index() % 4"></span>

        <section class="span4">
            <address data-bind="text: pruebaComputed"></address>
            <address data-bind="text: number"></address>
        </section>
     <!-- /ko -->
</div>

因此，当你看到即时通讯列出房间时，我试图插入一个带有行液体类的div，以遵循行中打破事物的引导方式......

但我想我遇到了一个错误，因为淘汰赛无法处理嵌套的无容器运营商..我是对的吗？我怎么能解决这个问题？

谢谢！

Answer 1

Knockout可以处理嵌套的无容器控件。以下是a fiddle，用于更改嵌套内容的内容，以证明其有效。

问题是淘汰赛不只是放置字符串，它正在解析模板的内容，为html创建一个javascript模板。你是假的关闭导致这个错误，因为它不理解你给它的结构：

Uncaught Error: Cannot find closing comment tag to match: ko foreach: rooms

我不确定我会称这是一个错误，因为在Knockout中缺少对模板中动态结构的支持。

这不合法：

<!-- ko if: $index() % 4 == 3 -->
      </div><div class="row-fluid">
<!-- /ko -->

因为它正在关闭尚未启动的标记。

Answer 2

谢谢Tyrsius，你让我注意到我必须改变我的策略:)所以我在我的viewmodel中添加了一个计算器来打破我的列表，如下所示：

vm.separarEnFilas = ko.computed(function () {

    var rooms = this.rooms(),
        result = [];
    for (var i = 0; i < rooms.length; i += 4) {
        var row = [];
        for (var j = 0; j < 4; ++j) {
            if (rooms[i + j]) {
                row.push(rooms[i + j]);
            }
        }
        result.push(row);
    }
    return result;

},vm);

然后在我看来我这样做了：

<div class="room-list" data-bind="foreach: separarEnFilas">
    <div class="row-fluid" data-bind="foreach: $data">
        <article class="span3">
            <div>
                <address data-bind="text: number"></address>
            </div>
        </article>
    </div>
</div>

knockout无法找到结束评论标记

2 个答案: