Render collection in 2 columns

Question

Currently I have:

<div data-bind="foreach: list">
</div>

And need:

<div data-bind="foreach: /* 1st half of the list */">
</div>
<div data-bind="foreach: /* 2nd half of the list */">
</div>

It would be great to avoid using 2 separate observables or computed.

Answer 1

You can use the array slice method to create the two collections:

<div data-bind="foreach: list.slice(0, list.length / 2) ">
    <span data-bind="text: $data" />
</div>
<div data-bind="foreach: list.slice(list.length / 2)">
    <span data-bind="text: $data" />
</div>

If you have an observable array you need to slightly modify your bindings:

<div data-bind="foreach: list.slice(0,list().length / 2) ">
    <span data-bind="text: $data"/>
</div>
<div data-bind="foreach: list.slice(list().length / 2)">
    <span data-bind="text: $data"/>
</div>

Demo JSFiddle.

Answer 2

You could just use mod 2, like this:

<div data-bind="foreach: list">
    <!--ko if: $index() % 2 == 0 -->
    <div class="row">
        <div class="col-md-6">
            <span data-bind="text: $data"></span>
        </div>
        <div data-bind="with: $parent.list()[$index()+1]" class="col-md-6">
            <span data-bind="text: $data"></span>
        </div>
    </div>
    <!--/ko-->
</div>

Fiddle: http://jsfiddle.net/robgallen/1728389j/

Answer 3

A safe and clean example of using an observable array

<!-- ko with: myObservableArray -->
    <div data-bind="foreach: $data.slice(0, $data.length / 2)">
        <span data-bind="text: $data"/>
    </div>
    <div data-bind="foreach: $data.slice($data.length / 2)">
        <span data-bind="text: $data"/>
    </div>
<!-- /ko -->