关于internet explorer:淘汰IE8兼容性问题

Knockout IE8 compatibility issue

在 IE9 上以 IE8 兼容模式运行时,我遇到了严重的淘汰问题。
这是问题:

我有一个动态生成的文本框数组,并且更改事件绑定到这些元素。当更改事件存在时,在 IE8 兼容模式下,我需要按两次 Tab 才能离开控件。这不会在 Firefox 中发生,也不会在没有事件绑定时发生。

我不确定这是否是我的活动的问题,所以我在这里发布代码:

1
2
3
4
5
6
7
8
9
10
11
  <tbody data-bind="foreach: DailyItemList">
                            <tr>
                                <td>
                                 <span  data-bind="text:Day"></span>

                                </td>
                                <td><input id="Text2" data-bind="value: Required"/></td>
                                <td><input id="Text3" data-bind="value: Setup, event:{change: ValidateSetup}"/></td>
                                <td><input id="Text4" data-bind="value: Close, event:{change: ValidateClose}"/></td>
  </tr>
  </tbody>

这是具有更改功能的视图模型:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var DailyItem = function (data) {
this.Day = ko.observable(data.DayOfWeek);
this.Required = ko.observable(data.Required);
this.Setup = ko.observable(data.SetupTime);
this.Close = ko.observable(data.CloseTime);
this.ValidateSetup = function () {
    if (this.Setup() > 30) {
        alert('Invalid SetupTime');
    }
}
this.ValidateClose = function () {
    if (this.Close() > 30) {
         alert('Invalid SetupTime');
    }
}
}

function ViewModel(items) {
   this.DailyItemList = ko.observableArray([]);
   records = $.map(items, function (data) { return new DailyItem(data) });
   this.DailyItemList(records);
}


如果你想解决 IE8 的兼容性问题,那么你可以从你的 Validate 函数中返回 true

1
2
3
4
5
6
7
this.ValidateSetup = function () {
    if (this.Setup() > 30) {
        alert('Invalid SetupTime');
    }

    return true;
}

这是一个示例:http://jsfiddle.net/rniemeyer/FfNqv/(jsFiddle 在 IE8 模式下本身存在一些问题,因此您可以运行 http://jsfiddle.net/rniemeyer/FfNqv/show/)

但更好的方法可能是使用手动订阅。当单个可观察对象发生更改时,这是执行代码的好选择。 computed 也可以这样做,这允许您依赖多个可观察对象。

通过手动订阅,您可以:

1
<input id="Text3" data-bind="value: Setup"/>

在你的视图模型中,你会这样:

1
2
3
4
5
6
7
8
9
this.Close = ko.observable(data.CloseTime);
this.Close.subscribe(function(newValue) {
    if (newValue > 30) {
        alert('Invalid SetupTime');
    }

    //set other observables, or do whatever you like."this" will be the this object.

}, this);