Tag Archives: IE8

KO Support für IE8

Leider ist der Internet Explorer 8, trotz des hohen Alters, noch immer nicht ausgestorben*. Deshalb sollte eine Website auch mit dem IE8 “zugänglich” sein.

Das MVVM Framework Knockout unterstütz offiziell den Internet Explorer v6 – v11.

Knockout is tested on the following browsers:
•Mozilla Firefox (versions 3.5 – current)
•Google Chrome (current)
•Microsoft Internet Explorer (versions 6 – 11)
•Apple Safari for Mac OS (current)
•Apple Safari for iOS (versions 6 – 8)
•Opera (current version)

It’s very likely that Knockout also works on older and newer versions of these browsers, but there’s only so many combinations we can check regularly! At the time of the last check, Knockout was also found to work on the following browsers (though we don’t recheck these for every release):
•Google Android OS browser
•Opera Mini
•Google Chrome 5+
•iOS Safari 5
•Mac OS X Safari 3.1.2+

To get a good idea of how Knockout will run on another browser or platform, simply run the test suite. This will validate hundreds of behavioral specifications and produce a report of any problems. The pass rate should be 100% on all the browsers listed above.

Quelle: Knockout: Browser Support

Als ich jedoch meine auf Knockout basierte Webapplikation auf IE8 ausprobiert habe, hat das Databinding nicht funktioniert. Der Grund ist realtiv simpel. Dennoch ist es verwunderlich, dass auf der Knockout Seite kein Wort darüber verloren wird.

Der Internet Explorer 8 interpretiert einige Keywords im “data-bind”-Attribut falsch und das Binding schlägt fehl. Das lässt sich verhindern in dem diese Keywords mit einfachen Anführungszeichen (‘) umschlossen werden. Das hat keine Auswirkung auf die Funktionalität und die Bindings funktionieren so auch in anderen Browsern.

Beispiel:

<!-- Funktioniert im IE8 nicht -->
<div data-bind="template: { if: myViewModel.templateName, name: myViewModel.templateName }"></div>
<div data-bind="with: myViewModel, css: { 'cssClassToApply': myViewModel.isXyAvailable }">

<!-- Funktioniert im IE8 -->
<div data-bind="template: { 'if': myViewModel.templateName, name: myViewModel.templateName }"></div>
<div data-bind="'with': myViewModel, 'css': { 'cssClassToApply': myViewModel.isXyAvailable }">

Meine Versuche haben ergeben, dass folgende Bindings nur mit einfachen Anführungszeichen verwendet werden können**:
– for
– foreach
– css
– with

* Gemäss statcounter kommt der IE8 immer noch auf einen Marktanteil von ~5% (27.06.2015).
Als der IE8 released wurde (19. März 2009) war Google Chrome in der Version 1 verfügbar. Die aktuellste Chrome Version ist v43.

** Nicht systematisch getestet. Ohne Gewähr.