Question

我有一个淘汰赛的foreach循环在Chrome中工作正常，但在IE8中出错了。

以下是绑定：

<ul>
<!-- ko foreach: { data: tasks, as: 'task' } -->
    <!-- ko if: somecondition -->
        <li data-bind="css: { active: somthing }">
            <a data-toggle="tab" data-target="#someID">Text <span data-bind="text: task.tasks().length - 1" class="someclass"></span></a>
        </li>
    <!-- /ko -->
    <!-- ko if: someOtherCondition -->
        <li data-bind="css: { active: somthing }">
            <a data-toggle="tab" data-target="#someOtherID">Text <span data-bind="text: task.tasks().length - 1" class="someclass"></span></a>
        </li>
    <!-- /ko -->
<!-- /ko -->
</ul>

IE8说：

Unable to parse bindings.
Message: TypeError: 'task' is undefined;
Bindings value: test: task.tasks().length - 1

编辑：刚刚有了新的发展。似乎当我做foreach循环而不是无容器时它起作用。换句话说，如果我执行以下操作，它可以工作：

<ul>
<div data-bind="foreach: { data: tasks, as: 'task' }">
    <!-- ko if: somecondition -->
        <li data-bind="css: { active: somthing }">
            <a data-toggle="tab" data-target="#someID">Text <span data-bind="text: task.tasks().length - 1" class="someclass"></span></a>
        </li>
    <!-- /ko -->
    <!-- ko if: someOtherCondition -->
        <li data-bind="css: { active: somthing }">
            <a data-toggle="tab" data-target="#someOtherID">Text <span data-bind="text: task.tasks().length - 1" class="someclass"></span></a>
        </li>
    <!-- /ko -->
</div>
</ul>

也许这可以提供更多关于出错的信息？

有什么想法吗？

Answer 1

您显示的第二个示例不应该起作用，因为它在语义上是不正确的。

<ul data-bind="foreach: { data: tasks, as: 'task' }">
    <li>
        <!-- ko if: somecondition -->
            <div data-bind="css: { active: somthing }">
                <a data-toggle="tab" data-target="#someID">Text <span data-bind="text: task.tasks().length - 1" class="someclass"></span></a>
            </div >
        <!-- /ko -->
        <!-- ko if: $index() === 1 && $root.showGroupTasks() -->
            <div data-bind="css: { active: somthing }">
                <a data-toggle="tab" data-target="#someOtherID">Text <span data-bind="text: task.tasks().length - 1" class="someclass"></span></a>
            </div>
        <!-- /ko -->
    </li>
</ul>

将您的无容器绑定放在li中，以便IE8正确识别它，然后使用无容器绑定或div或其他东西来确保跨浏览器兼容性。

Answer 2

请参阅PW Kad的答案，了解更为优雅和语义正确的方法。我不想接受这个答案，因为我没有测试它。

我找到了一个有效的解决方案：

<ul data-bind="foreach: { data: tasks, as: 'task' }">
    <li data-bind="if: somecondition, css: { active: somthing }">
        <a data-toggle="tab" data-target="#someID">Text <span data-bind="text: task.tasks().length - 1" class="someclass"></span></a>
    </li>
    <li data-bind="if: someOtherCondition, css: { active: somthing }">
        <a data-toggle="tab" data-target="#someOtherID">Text <span data-bind="text: task.tasks().length - 1" class="someclass"></span></a>
    </li>
</ul>

淘汰foreach绑定不能在IE8中工作

2 个答案: