3

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

<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 时，以遵循引导方式将事物分成行...

但我认为我遇到了一个错误，因为淘汰赛无法处理嵌套的无容器操作员.. 我对吗？我该如何解决这个问题？

谢谢！

4

2 回答 2

11

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

问题是敲除不仅仅是放置字符串，它正在解析模板的内容来为 html 创建一个 javascript 模板。You're fake close 导致了这个错误，因为它不理解你给它的结构：

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

我不确定我是否会称其为错误，因为它在模板中缺乏对动态结构的支持。

这是不合法的：

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

因为它正在关闭一个尚未启动的标签。

于 2013-04-15T18:17:51.163 回答
5

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

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>
于 2013-04-15T19:40:29.663 回答