html - 如何防止 knockout 从 IE8 跨度同级中剥离空文本节点

Question

假设我有 3 个 Span 包裹在一个 div 中。

<div>
    <span>1/1/2000</span>
    <span>-</span>
    <span>1/2/2000</span>
</div>

浏览器应该将跨度之间的换行符解释为空白，以便结果显示如下:

1/1/2000 - 1/2/2000

...不像其中任何一个

1/1/2000-1/2/2000
1/1/2000- 1/2/2000
1/1/2000 -1/2/2000

...当跨度没有 knockout 绑定(bind)时，IE8 就是这种情况。如果您使用 IE8 开发工具检查上述标记，您可以在每个跨度后清楚地看到“文本 - 空文本节点”。

<div>
    <span>1/1/2000</span>
    Text - Empty Text Node
    <span>-</span>
    Text - Empty Text Node
    <span>1/2/2000</span>
    Text - Empty Text Node
</div>

但是，一旦我像这样将 knockout 绑定(bind)放在跨度上，空文本节点的行为就会发生变化:

<div>
    <span data-bind="text: start"></span>
    <span data-bind="visible: end">-</span>
    Text - Empty Text Node
    <span data-bind="text: end"></span>
    Text - Empty Text Node
</div>

...前 2 个跨度之间的空文本节点看起来像是被剥离了。这是一个 knockout 错误吗？有什么解决办法吗？这是使用版本 2.3.0。

Answer 1

knockout::text-binding 中描述的空格存在问题。文档(请参阅注释 4，您的 IE 可能具有怪异模式:开启)。
Knockout 的解决方案是将一些东西放入 span 中。

<div>
    <span data-bind="text: start">&nbsp;</span>
    <span data-bind="visible: end">-</span>
    <span data-bind="text: end">&nbsp;</span>
</div>  

此外，您还可以使用单个 span 元素:

<div>
    <span data-bind="text: start + (end ? ' - ' : '') + end"></span>
</div>