CODEWITHSUNDEEP
javascriptjqueryknockout.js
Feliks Montez
Feliks Montez

Reputation: 548

Non-repeated element inside KnockoutJS foreach loop

I am trying to create a knockout.js component (with CSS3 grids) that displays a bunch of sub-components, which I know can be done via something like:

<div class="items grid" data-bind="foreach: { data: items, as: 'item' }">
    <item-component params="data: item" class="grid-item"></item-component>
</div>

The problem is that I cannot figure out how to put a non-repeated item into this list. Ultimately, I want to generate something along these lines:

<div class="items grid">
    <div class="something-else grid-item"></div>
    <item-component class="grid-item"></item-component>
    <item-component class="grid-item"></item-component>
    <item-component class="grid-item"></item-component>
</div>

The reason I can't just put the something-else outside of the foreach-bound element is that it's also a grid item, so it has to be a direct child of the grid. It crossed my mind to manually append it via jquery's append, but with MVVM, that's a terrible idea (it doesn't work anyway).

Does anyone know a way to do this with knockout.js?

Upvotes: 0

Views: 61

Answers (1)

Srishti Sinha
Srishti Sinha

Reputation: 618

If I have understood your requirement correctly, it looks you need containerless control flow. It has been talked about in the 2nd point of this answer.

It allows you to do things like this:

<ul>
    <li class="header">Header item</li>
    <!-- ko foreach: myItems -->
        <li>Item <span data-bind="text: $data"></span></li>
    <!-- /ko -->
    <li class="tail">Tail item</li>
</ul>

Output:

<ul>
    <li class="header">Header item</li>
    <li>Item <span>Spoon</span></li>
    <li>Item <span>Fork</span></li>
    <li class="tail">Tail item</li>
</ul>

Upvotes: 3

Related Questions