結合は、結合後にノックアウトは、実際のブラウザで正常に動作しますが、（互換モードでとIE9）IE8に失敗したIE8

Question

に失敗しKnockoutJS

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

誰もがなぜ知っているか、そしてどのように私ができます修理する？それは場合に役立ちます

---

はここで、全体のコードです：

<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

になり、あなたが離れてを結合ノックアウトの"CSS" から滞在理由がありますか？

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

それはあなたを知って良いことだIEで問題を発見し、あなたは回避策を見つけ、 それはを結合「のattr」結合、 と「CSS」のマニュアルではありませんようはノックアウトの推奨コースであると思われます。 クラス名を適用するアクションは混乱しないでしょうか？ あなたや他の人達のために？ knockout documentation for "css" bindingから

：

「目的

結合cssは、関連付けられたDOM要素に[重点がを追加]追加またはCSSクラスという名前の一つ以上を削除するこれがあります。たとえば、値が負になると赤で値を強調表示すると便利です。

（いいえte：CSSクラスを適用せず、スタイル属性値を直接割り当てたい場合は、スタイルバインディングを参照してください）。 "

Answer 2

IE8の言葉classで混乱しているようですので、それは引用符で囲む必要があります。だから、

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

は

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