1

我有一个淘汰赛 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>

也许这可以提供更多信息来了解出了什么问题？

有任何想法吗？

4

2 回答 2

0

请参阅 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>
于 2013-10-18T18:44:20.543 回答
0

您展示的第二个示例也不应该工作，因为它在语义上不正确。

<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 或其他东西来确保跨浏览器兼容性。

于 2013-10-18T18:01:58.340 回答