4

次のノックアウト バインディングは、実際のブラウザーでは問題なく動作しますが、IE8 (および互換モードの IE9) では失敗します。

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

2 に答える 2

20

IE8 は という単語classで混乱しているようです。そのため、引用符で囲む必要があります。そう

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

になる

<li data-bind="attr: { 'class': id() == $root.currentItem().id() ? 'active' : '' }">
于 2012-05-04T20:39:41.227 に答える
4

ノックアウトの「css」バインディングを避けた理由はありますか?

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

IE で問題を発見し、回避策を見つけたのは良いことですが、「attr」バインディングのドキュメントには記載されておらず、「css」バインディングは、クラス名を適用するためのノックアウトの推奨アクション コースのようです。 、あなたや将来の他の人にとって混乱することはないでしょうか?

「css」バインディングのノックアウトドキュメントから：

"目的

バインディングは、css1 つ以上の名前付きCSS クラス[強調追加] を関連する DOM 要素に追加または削除します。これは、たとえば、値が負になった場合に赤で強調表示するのに役立ちます。

(注: CSS クラスを適用するのではなく、スタイル属性値を直接割り当てたい場合は、スタイル バインディングを参照してください。)"

于 2012-05-05T05:28:09.057 に答える