I'm listing rooms in a twitter bootstrap interface like this:

<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>

So as you see im listing the rooms and im trying to insert a div with a row-fluid class to follow the bootstrap way of breaking things in rows...

but i think i ran into a bug since knockout cant handle nested containerless operators.. im i right? how can i solve this ??

thanks!

I'm listing rooms in a twitter bootstrap interface like this:

<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>

So as you see im listing the rooms and im trying to insert a div with a row-fluid class to follow the bootstrap way of breaking things in rows...

but i think i ran into a bug since knockout cant handle nested containerless operators.. im i right? how can i solve this ??

thanks!

• javascript
• knockout.js

2 Answers 2

Knockout can handle nested containerless controls. Here is a fiddle that changes what the nested content is, to demonstrate that it works.

The problem is that knockout isn't just placing strings, it is parsing the content of the template to create a javascript template for the html. You're fake close is causing this error, because it doesn't understand the structure you are giving it:

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

I am not sure I would call this a bug, so much as it is a lack of support in Knockout for dynamic structure in templates.

This is not legal:

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

Because it's closing a tag that hasn't been started.

Thanks Tyrsius, you made me notice that i had to change my strategy :) so i've added a puted into my viewmodel to break my list in rows like this:

vm.separarEnFilas = ko.puted(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);

And then in my view i did this:

<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>