Javascript IE8中的KnockoutJS绑定失败
以下敲除绑定在真实浏览器中工作正常,但在IE8(和兼容模式下的IE9)中失败Javascript IE8中的KnockoutJS绑定失败,javascript,internet-explorer-8,knockout.js,Javascript,Internet Explorer 8,Knockout.js,以下敲除绑定在真实浏览器中工作正常,但在IE8(和兼容模式下的IE9)中失败 有人知道为什么吗?我怎样才能修复它 以下是完整的代码,如果有帮助的话: <div class="toc-outer"> <ol id="table-of-contents" data-bind="sortable: { data: list, template: 'listTemplate', allowDrop: false, isEnabled: false }" class="t
有人知道为什么吗?我怎样才能修复它
以下是完整的代码,如果有帮助的话:
<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>
似乎IE8被类
这个词弄糊涂了,所以它需要加引号。所以
<li data-bind="attr: { class: id() == $root.currentItem().id() ? 'active' : '' }">
变成
<li data-bind="attr: { 'class': id() == $root.currentItem().id() ? 'active' : '' }">
你为什么不使用knockout的“css”绑定
很高兴知道你在IE中发现了问题,并且找到了解决方法,
但由于“attr”绑定的文档中没有它,
“css”绑定似乎是knockout推荐的课程
对于应用类名的操作,这可能不会造成混淆
为你还是其他人
从:
“目的
css
绑定向关联的DOM元素添加或删除一个或多个命名的css类[emphasis added]。例如,如果某个值变为负值,则用红色突出显示该值非常有用
(注意:如果您不想应用CSS类,而是想直接指定样式属性值,请参阅样式绑定。)
下面是attr绑定的详细信息。CSS绑定用于设置CSS属性,如边距或填充。我在试着给学生上课attribute@AdamRackis-我在文档中没有看到css绑定用于设置单个样式属性。相反,css绑定文档(我在答案中添加了部分内容)显示它是针对css类的。此外,css文档中还提到,如果您想直接添加特定的css属性,可以“指定样式属性”。+1这非常有用。此外,我还发现单词switch
会导致相同的错误,即使在模板中使用它作为click:$parent.switch
,这非常奇怪。for:是另一个吸引我的属性,需要是“for”:在IE<9中工作。这应该是这个问题的公认答案。简单明了。是的,我们都讨厌IE8。也帮助了我。
<li data-bind="attr: { 'class': id() == $root.currentItem().id() ? 'active' : '' }">