CODEWITHSUNDEEP
internet-explorer-8knockout.js
alpinescrambler
alpinescrambler

Reputation: 1954

knockout 2.0 doesn't work in IE8

This view works well with IE9 and Chrome. However, not with IE8. When the page is rendered, this is how it looks like:

enter image description here

My HTML (MVC3 View) is as shown below. 

<div id="machinedisplay" data-bind="with: selectedMachine" >
<h2><span data-bind="text: MachineDesciption" /></h2>
<!-- ko with: my.vm.machineData -->
<table>
    <thead><tr>
               <th>Point Name</th><th>Description</th><th>Points Data</th>
           </tr></thead>

    <tbody data-bind="foreach: Points">
        <tr>
            <td data-bind="text: PointName()"></td>
            <td data-bind="text: PointDesciption()"></td>
            <td>
                <table style="width:100%;">
                    <thead><tr>
                               <th>Name</th><th>Description</th><th>Value</th><th></th>
                           </tr></thead>

                    <tbody data-bind="foreach: Params">
                        <tr>
                            <td data-bind="text: ParameterName"></td>
                            <td data-bind="text: ParameterDescription"></td>
                            <td data-bind="text: StringValue"></td>
                        </tr> 
                    </tbody>
                </table>            
            </td>
        </tr> 
    </tbody>
</table>
<!-- /ko -->
</div>

Any ideas on IE8 work around?

EDIT: To illustrate this problem on a simpler model, check out this fiddle http://jsfiddle.net/ericpanorel/nzKvb/

I figured that I am running into problems because I am using the "with" or "if" bindings. I read somewhere that this causes problems with IE8.

I used IE9, and if you use your developer tools to switch from IE9 to IE8, this Fiddle doesn't work properly anymore. This fiddle is actually derived from one of knockout's samples (http://knockoutjs.com/examples/gridEditor.html)

EDIT: I updated the fiddle... http://jsfiddle.net/nzKvb/20/ It has something to do with short-hand closing of tags inside the nested containerless bindings

 <!-- ko if: Allowed-->
<h2>
 <span data-bind="text: Dummy"/>     <===== This will bomb in IE8 
</h2>

Upvotes: 1

Views: 8998

Answers (2)

nicoabie
nicoabie

Reputation: 2894

The problem is here because 

<!-- ko if: Allowed-->

Older IE versions can be picky about using JavaScript reserved words for property names.

So you should write 'if'

Check Same problem in another link!

Upvotes: 3

Mark Robinson
Mark Robinson

Reputation: 13278

The jsFiddle had an extra comma at the end of the array, which IE8 was treating as a null object:

var viewModel = new GiftModel([
    { name: "Tall Hat", price: "39.95"},
    { name: "Long Cloak", price: "120.00"},
    { name: "HK 416", price: "2420.00"}, <-- HERE !!!
]);
ko.applyBindings(viewModel);

The fiddle works fine without the comma:

http://jsfiddle.net/XPMUA/

Not sure if this solves your underlying problem but at least the fiddle is working now :-)

Upvotes: 6

Related Questions