2

假设我有 3 个跨度包裹在一个 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

...当跨度没有淘汰赛绑定时，IE8 就是这种情况。如果您使用 IE8 开发工具检查上述标记，您可以在每个跨度之后清楚地看到“ 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。

4

1 回答 1

3

在knockout::text-binding文档中描述的空格存在问题（请参阅注 4，可能是您的 IE 具有Quirk 模式：ON）。
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>
于 2013-10-12T22:06:11.443 回答