Question

我的网页在Chrome中运行良好但在IE9中运行不佳。此错误导致控制台出现的错误是

SCRIPT5022：无法解析绑定。消息：[对象错误]; 绑定值：foreach：statlist。

HTML如下：

<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());

另一条信息是，来自API的json看起来像这样。我不确定是不是因为TypeCount不是字符串？

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

Answer 1

使用async: false不是一个好主意。也许这就是问题所在，因为您没有在ViewModel中初始化statlist作为属性。更好的解决方案是使statlist成为一个可观察的数组，然后进行异步调用，并准备好设置数据。

示例：

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());

Knockout JS Script适用于Chrome，但不适用于IE9

1 个答案: