我有一个viewmodel,在更改id属性的情况下重新绑定自己
function ViewModel(data) {
var self = this;
self.id = ko.observable(data.selectedId);
self.array = data.array;
self.displayed = ko.observable(self.array.filter(function(i) {
return i.id === id;
})[0]);
self.id.subscribe(function(newValue) {
self.displayed(self.array.filter(function(i) {
return i.id === newValue;
})[0]);
});
}
// $(document).ready
$.ajax({...}).then(function(data) {
ko.applyBinding(new ViewModel(data));
});
问题是数组的过滤需要一些时间。我决定展示一个Bootstrap模态窗口让他等待。
我在我的html中创建了一个<div class="modal">
等...我显示了一条等待消息,并改变了这样的代码。
function ViewModel(data) {
var self = this;
self.id = ko.observable(data.selectedId);
self.array = data.array;
self.displayed = ko.observable(self.array.filter(function(i) {
return i.id === id;
})[0]);
self.id.subscribe(function(newValue) {
function promise() {
var dfd;
dfd = $.Deferred();
dfd.resolve(newValue);
return dfd.promise();
}
$('#mymodal').modal(); // (2)
$.when(promise()).then(function(id) {
return self.array.filter(function(i) {
return i.id === id;
})[0];
}).then(function(object) {
self.displayed(object);
}).then(function() {
$('#mymodal').modal('hide');
});
});
}
// $(document).ready
$('#mymodal').modal(); // (1)
$.ajax({...}).then(function(data) {
ko.applyBinding(new ViewModel(data));
}).then(function() {
$('#mymodal').modal('hide');
});
第一个(1)
案例在Internet Explorer上完美运行,而第二个(2)
则不然。我还在每个promise链的末尾添加了一个.catch()
调用,以确保它不是一个uncaugh异常的问题,但事实并非如此。