CODEWITHSUNDEEP
javascriptknockout.js
user3821263
user3821263

Reputation: 121

Knockout JS Script works in Chrome but not in IE9

I have a web page that works great in Chrome but not in IE9. The error that comes on the console from this error is

SCRIPT5022: Unable to parse bindings. Message: [object Error]; Bindings value: foreach: statlist.

HTML is below:

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="statsarea" data-bind="foreach: statlist">
           <p> TypeCount: <strong data-bind="text: TypeCount"></strong>, Priority: <strong data-bind="text: SentDate"></strong>
            <br/>
           </p>

    </div>


        <script src="js/jquery-1.9.0.js" type="text/javascript"></script>
        <script src="js/knockout-2.2.1.js" type="text/javascript"></script>
        <script src="models/messagecount.js" type="text/javascript"></script>

    </body>
</html>

Javascript:

function MessageCountDataModel() {

    var self = this;
    var allCounts = (function() {

        var json = null;

        $.ajax({
            'async': false,
            'global': false,
            'url': "http://localhost:8080/API/getstats.json",
            'datatype': "json",
            'success': function(data) {
                self.statlist = data;
            }
        });
    })();
}

ko.applyBindings(new MessageCountDataModel());

One more piece of info is that that the json that comes out of the API looks something like this. I'm not sure if it's because the TypeCount is not a string?

[
    {
        "TypeCount": 102,
        "SentDate": "2014-08-18T00:00:00.000Z"
    }
]

Upvotes: 0

Views: 228

Answers (1)

VStoykov
VStoykov

Reputation: 1740

It's not a good idea to use async: false. Maybe this is the problem because you don't initialize statlist as attribute in yout ViewModel. Better solution will be to make statlist to be an observable array, then make a async call and when it is ready to set the data.

Example:

function MessageCountDataModel() {
    var self = this;

    self.statlist = ko.observableArray();

    self.loadData = function() {
        $.ajax({
            'url': "http://localhost:8080/API/getstats.json",
            'datatype': "json",
            'success': function(data) {
                self.statlist(data);
            }
        });
    };

    self.loadData();
}

ko.applyBindings(new MessageCountDataModel());

Upvotes: 1

Related Questions