internet-explorer - foreach 数据绑定(bind)和输入值数据绑定(bind)的 knockout IE8 问题

Question

我正在使用 knockout 2.0
我一直试图让这个表在 IE8 中工作(它在 FF、Chrome 和 IE9 中运行良好):

<table data-bind="foreach: Applications">
    <tr>
        <td><input type="text" data-bind="value: Name"/></td>
    </tr>
</table>

在 IE8 中我得到错误:
错误:“未定义”为空或不是对象
网址: http://127.0.0.1:81/Scripts/jquery-1.5.1.min.js

实际上，我已经通过使表格成为带有模板的 tbody 并使模板包含表格行来解决此问题。但这不是那么干净，我想知道是否有更好的解决方案。

以下是我设置 View 模型的方法:

self.Applications = ko.observableArray([]);

$.each(model.Applications, function (i, applicationItem) {
    var application = new Application(applicationItem.ApplicationID, applicationItem.Name);
    self.Applications.push(application);
});

function Application(applicationID, name) {
    var self = this;
    self.ApplicationID = applicationID
    self.Name = ko.observable(name);
};

编辑:找到解决方案
改为使用无容器控制流

<table>
    <tbody>
    <!-- ko foreach: Applications -->
    <tr>
        <td><input type="text" data-bind="value: Name"/></td>
    </tr>
    <!-- /ko -->
    </tbody>
</table>

Answer 1

您的修复工作正常，如果您想要一个不那么冗长的选项，您可以简单地将数据绑定(bind)放在“tbody”节点上:

<table>
    <tbody data-bind="foreach: Applications">
        <tr>
            <td><input type="text" data-bind="value: Name"/></td>
        </tr>
    </tbody>
</table>

问题是 ie8 会自动向 DOM 添加一个“tbody”(即使标记中不存在)。所以，如果 data-bind 属性在“table”节点上，当 knockout 执行 foreach 时，新的子节点被添加到“table”而不是“tbody”，获得类似:

<table data-bind="foreach: Applications">
    <tr>
        <td><input type="text" value="John"/></td>
    </tr>
    <tbody>
    </tbody>
</table>

IE 对此并不满意。这就是为什么，正如您肯定发现的那样，仅使用“无容器”表示法是不够的，您需要“tbody”节点。请注意，其他浏览器处理此问题没有问题。
这是使用 knockoutjs 时“必须知道”的技巧之一。

希望这有助于理解发生了什么。