IE9兼容性视图中Knockout.js中的绑定错误 [英] Binding error in Knockout.js in IE9 Compatibility View

问题描述

我的网络应用程序的UI主要是使用优秀的Knockout.js构建的。它在IE7兼容模式下显示IE8中的一些布局错误。我尝试添加元标记以强制执行标准模式：

My web app's UI is mostly built with the excellent Knockout.js. It is showing some layout errors in IE8 under IE7 compatibility mode. I have tried adding a meta tag to force standards mode like so:

< meta http-equiv =X-UA-Compatible内容=IE = edge/>

但是，IE9下的IE9兼容性视图（我必须假设有些用户会设置） ）当Knockout进行绑定时会导致错误：

However, in IE9 under IE9 Compatibility View (which I have to assume some users will have set) this causes an error when Knockout does its binding:

DOM异常：INVALID_CHARACTER_ERR（5）

DOM Exception: INVALID_CHARACTER_ERR (5)

我'我发现在网上有很多关于这个错误的引用 - 与DOM元素的创建方式有关 - 但显然我不控制它，Knockout就是。

I've found plenty of references to this error on the net - to do with the manner in which DOM elements are created - but obviously I'm not controlling this, Knockout is.

强制（或鼓励）IE的所有当前和未来版本在标准模式下呈现的强大且最简单的hacky方式是什么，这也与Knockout.js构建DOM的方式兼容？另外，任何人都可以详细说明Knockout.js在这里做了哪些IE9不喜欢？非常感谢。

What is a robust and minimally hacky way to force (or encourage) all present and future versions of IE to render in standards mode, which is also compatible with how Knockout.js builds the DOM? Also, can anyone elaborate on exactly what Knockout.js is doing here which IE9 doesn't like? Many thanks.

更新：

我已经在我的标记中至少隔离了一个问题。我有一对单选按钮：

I've isolated at least one issue in my markup. I have a pair of radio buttons:

        <input type="radio" data-bind="checked: Gender, attr: { name: 'gender-' + ID() }" value="@((int)Sex.Male)" />
        <span>Male</span>
        <input type="radio" data-bind="checked: Gender, attr: { name: 'gender-' + ID() }" value="@((int)Sex.Female)" />
        <span>Female</span>

这对单选按钮的name属性生成为gender-加上ID当前绑定的视图模型，因为我有一个深层次结构，具有这对单选按钮的多个实例。因为我使用Knockout生成name属性，所以我没有根据标记中的输入指定它 - 当我还添加一个手动名称，如joe时，这在浏览器模式下正确绑定：IE9兼容性视图 。因此，就像在兼容模式下，单选按钮被IE视为无效，因为它没有名称属性。但它在浏览器模式下运行：IE9。

The name attribute of this pair of radio buttons is generated as "gender-" plus the ID of the currently bound view model, as I have a deep hierarchy with multiple instances of this pair of radio buttons. Because I am generating the name attribute with Knockout, I'm not specifying it against the input in the markup - and when I do also add a manual name such as "joe", this binds correctly under Browser Mode: "IE9 Compatibility View". So it's as if when in compatibility mode, the radio button is being deemed to be invalid by IE because it doesn't have a name attribute. But it works under Browser Mode: "IE9".

此外，这与IE边缘元标记无关，每当我切换到兼容性视图时它都会失败无论如何 - 但我的下一个问题是，为什么元标记不会覆盖浏览器设置？

Also this doesn't relate specifically to the IE-edge meta tag, it will fail whenever I switch to Compatibility View regardless - but my next question is, why doesn't that meta tag override the browser setting?

推荐答案

尝试换行名称属性带引号。

Try to wrap name attribute with quotes.

 <input type="radio" data-bind="checked: Gender, attr: { 'name': 'gender-' + ID() }" value="@((int)Sex.Male)" /> 

在下面的评论中查看答案详情

Check answer details at comments below

这篇关于IE9兼容性视图中Knockout.js中的绑定错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！