Knockout.js: foreach, but with a special element first?

http://stackoverflow.com/questions/5371772/knockout-js-foreach-but-with-a-special-element-first/5372412#5372412

by rniemeyer

HTML

<script src="http://knockoutjs.com/downloads/jquery.tmpl.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<ul data-bind="template: { name: 'foo-template', foreach: foos, templateOptions: { first: foos()[0]} }">
</ul>
<button data-bind="click: add">Add</button>

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

JavaScript

var viewModel = {
    foos: ko.observableArray(foos = [{
        name: "a"},
    {
        name: "b"},
    {
        name: "c"}]),
    add: function() {
        this.foos.push({
            name: "new"
        });
    }
}

ko.applyBindings(viewModel);