How to prevent knockout from stripping empty text nodes from IE8 span siblings

Question

Say I have 3 spans wrapped in a div.

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

Browsers are supposed to interpret the newlines between the spans as whitespace so that the resultant display looks like this:

1/1/2000 - 1/2/2000

... not like any of these

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

... and this is the case with IE8 when the spans have no knockout bindings. If you were to inspect the above markup using IE8 Developer tools, you can clearly see "Text - Empty Text Node" after each span.

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

However, as soon as I put knockout binding on the spans like so, the empty text node behavior changes:

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

... the empty text node between the first 2 spans looks like it's getting stripped. Is this a knockout bug? Any workaround? This is using version 2.3.0.

It might just be a typo but - is not using the '=' attribute. It is using the -???? — segFault, Oct 12 '13 at 19:34
@PWKad I was going to try to, but jsfiddle.net threw all kinds of errors in IE8 just trying to create a new fiddle. — danludwig, Oct 12 '13 at 20:03
@segFault, no, that was just a typo in my question, I fixed it, thanks for pointing it out. — danludwig, Oct 12 '13 at 20:03

score 3 · Answer 1 · answered Oct 12 '13 at 22:06

3

There is an issue with whitespaces described in knockout::text-binding documentation (see Note 4, may be your IE has Quirk mode : ON).
Knockout's solution is to put something to span.

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

Also, you can use single span element for it:

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

answered Oct 12 '13 at 22:06

Ilya

29,135
19
110
158

The first line in the HTML is ` `, so I don't think IE8 is being thrown into quirks mode. Your second suggestion was my temporary workaround, but I did not like it. The first suggestion of putting a non breaking space in the span works too, and though I don't like it either, it's much better than the second option. Is there anything else that could be going on here to cause this? – danludwig Oct 13 '13 at 12:53
@danludwig I havn't more ideas, why IE works unpredictable. IE is crazy – Ilya Oct 13 '13 at 17:27

How to prevent knockout from stripping empty text nodes from IE8 span siblings

1 Answers1