如何防止敲除从 IE8 跨度兄弟中剥离空文本节点

Question

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

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

浏览器应该将 span 之间的换行符解释为空格，以便生成的显示如下所示：

1/1/2000 - 1/2/2000

...不像这些

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

...当跨度没有淘汰绑定时，IE8 就是这种情况。如果您使用 IE8 开发工具检查上述标记，您可以在每个 span 之后清楚地看到“Text - Empty Text Node”。

<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>

但是，一旦我像这样在跨度上放置淘汰赛绑定，空文本节点的行为就会发生变化：

<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.3.0。

Answer 1

knockout::text-binding 文档中描述的空格存在问题（请参阅注 4，可能是您的 IE 具有 Quirk 模式：开启）。
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>