KnockoutJS virtual elements won't work on 3G networks (odd)
Mobile carriers filter traffic through proxies that (among other things like image compression) try to "compress" HTML by removing whitespace and HTML comments.
The <!-- ko… virtual elements these will be removed by ISPs on the fly between your server and mobile user.
It's a pretty nasty gotcha, because you won't see that in development, but only on the device, and only when using specific carriers (e.g. O2 UK, european Vodaphone).
Written by Kornel
Related protips
2 Responses
This "optimisation" breaks other frameworks (such as less css). I encountered this for the first time a while back: https://github.com/less/less.js/issues/1189#issuecomment-13766554 I'd have hoped the mobile operators would have resolved this by now.
I just stumbled across the exact same issue.
You can chuck all of your app's html-code into a script-tag such as <script type="text/html" id="app-template">[...]</script> and then only put this into your body (other than the script-tag): <div data-bind="template: { name: 'app-template' }"></div>
The network I tested it with (T-Mobile/EE in the UK) does not compress the contents within script-tags and it now all works flawlessly.
I also just outlined it on my blog: http://www.clientengage.com/knockoutjss-containerless-control-flow-syntax-and-issues-on-3g-networks/
