How to use foreach with a special first element?

Question

If I have an observable array

foos = [{ name: \"a\" }, { name: \"b\" }, { name: \"c\" }]

on my viewmodel, I would like to render the follow

Answer 1

This:

<ul>
    <li>Static item</li>
    <!-- ko foreach: products -->
        <li data-bind="text: name"></li>
    <!-- /ko -->
</ul>

will not work in IE8. I'm leaning toward the template answer for that situation. Any other ideas?

EDIT: here is what worked in IE8 - knockout 2.2.1: using the options bindings as per the bottom of the following comment:

https://stackoverflow.com/a/16361750

Answer 2

As there is not currently a way to tell the template binding where to render the template, I don't see a cleaner way to do it right now other than something like:

<ul data-bind="template: { name: 'foo-template', foreach: foos, templateOptions: { first: foos()[0]} }">
</ul>

<script id="foo-template" type="text/html">
    {{if $item.first === $data}}
    <li class="add-new-foo">Special stuff here</li>
    {{/if}}
    <li data-bind="text: name"></li>
</script>

So, we are passing the first item in your array as templateOptions and checking for if the item that we are dealing with in the template is indeed the first.

Sample here: http://jsfiddle.net/rniemeyer/XuXcr/

Also templateOptions was added after 1.12 KO, so you would need current code. More info about templateOptions here.

Hope this helps.

Answer 3

<!-- ko if: $index() == 0 -->
your code
<!-- /ko -->

Answer 4

Looks like it's going to be possible with the new containerless control flow and foreach binding in KO 1.3 2.0:

<ul>
    <li>Static item</li>
    <!-- ko foreach: products -->
        <li data-bind="text: name"></li>
    <!-- /ko -->
</ul>

See this post for details: http://blog.stevensanderson.com/2011/08/31/knockout-1-3-0-beta-available/