Bootstrap模式未在异步事件中显示

时间:2016-10-28 13:28:06

标签: knockout.js twitter-bootstrap-3 jquery-deferred

我有一个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异常的问题,但事实并非如此。

0 个答案:

没有答案