knockout无法找到结束评论标记

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,以遵循行中打破事物的引导方式...

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

谢谢!

Answer 1

Knockout可以处理嵌套的无容器控件.这是一个改变嵌套内容的小提琴,以证明它是有效的.

问题是淘汰不只是放置字符串,而是解析模板的内容以创建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>