javascript - Knockout js 嵌套控制流绑定(bind)不起作用

Question

我刚刚开始使用 Knockout，我不确定我是否发现了该库的错误，或者我是否只是在闲逛。

我有一个数组，为了显示目的，我想将其拆分为三个列表，但它显示开始和结束 ul标签把我的事情弄乱了。

这是我想要做的事情的一个jsfiddle，看起来只有第一个列表项正在为每个列表呈现，而其他列表项则被跳过。 http://jsfiddle.net/bn44e/2/

这是一个几乎相同的 jsfiddle，我在其中替换了 <ul></ul>标签为 <p>start</p>和<p>stop</p>并且所有列表项都正在呈现。 http://jsfiddle.net/Ue4C3/

Answer 1

这不是一个bug，ko虚拟元素绑定(bind)的打开和关闭必须在DOM的同一级别。

因为ko管理的是DOM，所以它需要动态创建/删除虚拟元素内的所有DOM(不是字符串)内容。 ko没有办法管理单个<ul> (或 </ul> )字符串。

所以在第一个 jsfiddle 中，ko 像这样对待你的绑定(bind):

<!-- ko foreach: items -->

  <!-- ko if: $index() === 0 || $index() === 10 || $index() === 20 -->
    <ul>

    <!-- ignored because there is no matching opening -->
    <!-- /ko --> 

    <li>Index <span data-bind="text: $index()" style="color:blue;"></span></li>

    <!-- ignored because there is no matching closing -->
    <!-- ko if: $index() === 9 || $index() === 19 || $index() === 29 -->

    </ul>
  <!-- /ko --> <!-- this closing actually matches the first opening ko -->

<!-- /ko -->

更新

看起来被忽略的虚拟绑定(bind)搞乱了内部<span data-bind="text: $index()"></span>的绑定(bind)上下文。 ，必须删除不匹配的虚拟绑定(bind)才能使内部$index在职的。 http://jsfiddle.net/bn44e/1/

我不知道上下文问题背后的原因，猜测需要深入挖掘源代码以找出不匹配的虚拟绑定(bind)的影响。

但无论如何，不​​匹配的虚拟绑定(bind)不应保留在生产代码中。