KnockoutJS binding fails in IE8

Question

The following knockout binding works fine in real browsers, but fails in IE8 (and IE9 in compatibility mode)

<li data-bind="attr: { class: id() == $root.currentItem().id() ? 'active' : '' }"> 

Does anyone know why, and how I can fix it?

---

Here's the whole code, if that helps:

<div class="toc-outer">
    <ol id="table-of-contents" data-bind="sortable: { data: list, template: 'listTemplate', allowDrop: false, isEnabled: false }" class="toc toc-tree"></ol>
</div>

<script id="listTemplate" type="text/html">
    <li data-bind="attr: { class: id() == $root.currentItem().id() ? 'active' : '' }">
        <div data-bind="attr: { class: 'dropdown' + (id() == $root.currentItem().parentId() ? ' active' : '') }">
            <a href="#" class="toggle">
                <i data-bind="visible:children().length > 0, attr: { class: 'icon-toggle icon-minus hide' + (id() == $root.currentItem().id() ? ' icon-white' : '') }"></i>
            </a>
            <a class="dropdown-toggle menu"
                href="#"
                data-bind="visible:$root.allowEditing"
                data-toggle="dropdown">

                <i data-bind="attr: { class: 'icon-menu icon-list-alt hide' + (id() == $root.currentItem().id() ? ' icon-white' : '') }"></i>
            </a>
            <a class="name" data-bind="attr: {href: hash}">
                <i data-bind="visible: type() == 'settings', attr: { class: 'icon-type icon-settings icon-home' + (id() == $root.currentItem().id() ? ' icon-white' : '') }"></i>
                <i data-bind="visible: type() == 'video', attr: { class: 'icon-type icon-video icon-facetime-video' + (id() == $root.currentItem().id() ? ' icon-white' : '') }"></i>
                <i data-bind="visible: type() == 'data', attr: { class: 'icon-type icon-data icon-signal' + (id() == $root.currentItem().id() ? ' icon-white' : '') }"></i>
                <i data-bind="visible: type() == 'file', attr: { class: 'icon-type icon-file icon-download-alt' + (id() == $root.currentItem().id() ? ' icon-white' : '') }"></i>
                <i data-bind="visible: type() == 'test', attr: { class: 'icon-type icon-test icon-ok-sign' + (id() == $root.currentItem().id() ? ' icon-white' : '') }"></i>
                <span data-bind="text:name"></span>
                <span class="badge draft" data-bind="visible:status() == 'draft'">D</span>
            </a>
            <dl class="dropdown-menu" data-bind="visible:$root.allowEditing">
                <dd><a href="#" data-bind="visible: parentId() !== 0 && !topLevelChild(), click: moveOut" data-toggle="pill" data-target="#item-pane" title="#{TocMoveOut}" class="moveItemOut">#{TocMoveOut}</a></dd>
                <dd><a href="#" data-bind="visible: parentId() !== 0 && !firstSibling(), click: moveIn" data-toggle="pill" data-target="#item-pane" title="#{TocMoveIn}" class="moveItemIn">#{TocMoveIn}</a></dd>
                <dd data-bind="visible: parentId() !== 0 && (!topLevelChild() || !firstSibling())" class="divider"></dd>
                <dd><a href="#" data-toggle="pill" data-target="#item-pane" title="#{TocEdit}" class="edit">#{TocEdit}</a></dd>
                <dd data-bind="visible: parentId() !== 0"><a href="#" class="remove">Remove</a></dd>
                <dd class="divider"></dd>
                <dd><a href="#page" data-toggle="pill" data-target="#item-pane" title="#{TocAddPage}" class="add">#{TocAddPage}</a></dd>
                <dd><a href="#video" data-toggle="pill" data-target="#item-pane" title="#{TocAddVideo}" class="add">#{TocAddVideo}</a></dd>
                <dd><a href="#file" data-toggle="pill" data-target="#item-pane" title="#{TocAddFile}" class="add">#{TocAddFile}</a></dd>
                <dd><a href="#test" data-toggle="pill" data-target="#item-pane" title="#{TocAddTest}" class="add">#{TocAddTest}</a></dd>
                <dd><a href="#data" data-toggle="pill" data-target="#item-pane" title="#{TocAddData}" class="add">#{TocAddData}</a></dd>
                <dd class="divider"></dd>                                
                <dd><a href="#library" data-toggle="pill" data-target="#item-pane" title="#{TocAddLibrary}" class="add add-from-library">#{TocAddLibrary}</a></dd>
            </dl>                            
        </div>
        <span class="divider" data-bind="visible: type() == 'settings'"></span>
        <ol class="toc-child" data-bind="sortable: {template: 'listTemplate', data:children, isEnabled: $root.allowEditing(), beforeMove: beforeTreeItemMove, afterMove: tocSorted, allowDrop: false }"></ol>
    </li>
</script>

Answer 1

It seems IE8 is confused by the word class, so it needs to be in quotes. So

<li data-bind="attr: { class: id() == $root.currentItem().id() ? 'active' : '' }">

becomes

<li data-bind="attr: { 'class': id() == $root.currentItem().id() ? 'active' : '' }">

Answer 2

Is there a reason you stayed away from knockout's "css" binding?

http://knockoutjs.com/documentation/css-binding.html

It's good to know you found the problem in IE, and you found a work-around, but as it's not in the documentation for "attr" binding, and the "css" binding seems to be knockout's recommended course of action for applying class names, might it not be confusing for you or others down the road?

From the knockout documentation for "css" binding:

"Purpose

The css binding adds or removes one or more named CSS classes [emphasis added] to the associated DOM element. This is useful, for example, to highlight some value in red if it becomes negative.

(Note: If you don’t want to apply a CSS class but instead want to assign a style attribute value directly, see the style binding.)"