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

<ul>
  <li class="add-new-foo">Special stuff here</li>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

I got pretty close with

<ul data-bind="template: { name: 'foo-template', foreach: foos }">
  <li class="add-new-foo">Special stuff here</li>
</ul>

<script id="foo-template" type="text/html">
  <li data-bind="text: name"></li>
</script>

But this ended up putting the .add-new-foo after the a, b, c.

Any ideas? In my case it's crucial to use Knockout foreach instead of jQuery template's {{each}}, because of the benefits mentioned in the Knockout docs.

Answer 1

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/