装载程序在knockoutjs中无法正常工作

Question

我在html页面中有一个菜单栏。当我点击任何菜单时，选项加载器将显示，直到加载Web用户控件。 但问题是当用户控制加载初始html时加载器停止，但是用户控件有一些动态数据需要时间来加载 没有装载机即将到来。我希望加载器继续显示，直到用户控制完全加载。 以下是我的淘汰赛js代码

function ClientAdminTabViewModel() {
    var that = this,
        view = {};

    this.loading = ko.observable(false);

    this.tabs = [
        {
            dataUrl: null,
            isSelected: ko.observable(false),
            name: "residents",
            onOpen: function (e, tabData) {
                new ResPortal.Admin.ClientAdmin();
            },
            title: "Residents",
            url: "Default.aspx/ClientAdminTab"
        },
        {
            dataUrl: null,  // TODO
            isSelected: ko.observable(false),
            name: "reports",
            onOpen: function (e, tabData) {
                that.openTab(that.tabs[1].subMenus[0]);
            },
            subMenus: [
                {
                    dataUrl: null,
                    name: "userDetail",
                    onOpen: function () {
                        new ResPortal.Admin.ClientAdminUserDetailReport();
                    },
                    title: "User Detail",
                    url: "/Admin/Default.aspx/ClientAdminUserDetailReportTab",  // Tab
                    visible: ko.observable(true)
                },
                {
                    dataUrl: null,  // TODO
                    name: "residentStatus",
                    onOpen: function () {
                        new ResPortal.Admin.ClientAdminResidentStatusReport();
                    },
                    title: "Resident Status",
                    url: "/Admin/Default.aspx/ClientAdminResidentStatusReportTab",  // Tab
                    visible: ko.observable(true)
                }
            ],
            title: "Reports",
            url: "Default.aspx/ClientAdminUserDetailReportTab"  // TODO
        }
    ];

    this.currentTab = ko.computed(function () {
        var result = _(that.tabs).find(function (tab) {
            return tab.isSelected();
        });

        return result;
    });

    this.formatTabs = function (elements, data) {
        var $ul = $(elements).filter("li").parent();

        if ($ul.children("li").length < that.tabs.length) {
            return;
        }

        $ul.htmlClean();
    };

    this.openTab = function (tab, data) {
        var $mainPanel = $("#MainPanel"),
            isSubMenu,
            render;

        if (!tab) {
            window.location.hash = "";

            return;
        }

        isSubMenu = (tab.isSelected === undefined);

        render = function (html) {
            $mainPanel.html(html);

            if (tab.onOpen) {
                tab.onOpen($.event, data);
            }
        };

        if (!isSubMenu && tab.isSelected()) {
            return;
        }

        if (!isSubMenu) {
            that.selectTab(tab);
        }

        if (tab.url === "") {
            return;
        }

        $mainPanel.html("");

        if (view[tab.name]) {
            render(view[tab.name]);
        } else {
            that.loading(true);

            $.ajax({
                type: "POST",
                url: tab.url,
                data: JSON.stringify({
                }),
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            }).fail(function (data) {
                ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
            }).done(function (data) {
                // Cache the tab's HTML
                view[tab.name] = data.d;

                render(data.d);

                that.loading(false);
            });
        }

        location.hash = tab.name;
    };

    this.selectTab = function (tab) {
        var tb = _(that.tabs).find(function (t) {
            return t === tab;
        });

        if (tb) {
            tb.isSelected(true);

            _(that.tabs).each(function (t) {
                if (t !== tab) {
                    t.isSelected(false);
                }
            });
        } else {
            window.location = window.location;
        }
    };
};

function MaAdminTabViewModel() {
    var that = this,
        view = {};

    this.loading = ko.observable(false);

    this.tabs = [
        {
            dataUrl: null,
            isSelected: ko.observable(false),
            name: "clientadmins",
            onOpen: function (e, tabData) {
                new ResPortal.Admin.MaAdmin();
            },
            title: "Client Admins",
            url: "MaAdminTab.html"
        },
        {
            dataUrl: null,
            isSelected: ko.observable(false),
            name: "tools",
            onOpen: function (e, tabData) {
                new ResPortal.Admin.Tools();
            },
            subMenus: [
                {
                    dataUrl: null,
                    name: "TestEmail",
                    onOpen: function () {
                        new ResPortal.Admin.Tools();
                    },
                    title: "Test Email",
                    url: "ToolsTab.html",
                    visible: ko.observable(true)
                }
            ],
            title: "Tools",
            url: "ToolsTab.html"
        }
    ];

    this.currentTab = ko.computed(function () {
        var result = _(that.tabs).find(function (tab) {
            return tab.isSelected();
        });

        return result;
    });

    this.formatTabs = function (elements, data) {
        var $ul = $(elements).filter("li").parent();

        if ($ul.children("li").length < that.tabs.length) {
            return;
        }

        $ul.htmlClean();
    };

    this.openTab = function (tab, data) {
        var $mainPanel = $("#MainPanel"),
            isSubMenu,
            render;

        if (!tab) {
            window.location.hash = "";

            return;
        }

        isSubMenu = (tab.isSelected === undefined);

        render = function (html) {
            $mainPanel.html(html);

            if (tab.onOpen) {
                tab.onOpen($.event, data);
            }
        };

        if (!isSubMenu && tab.isSelected()) {
            return;
        }

        if (!isSubMenu) {
            that.selectTab(tab);
        }

        if (tab.url === "") {
            return;
        }

        $mainPanel.html("");

        if (view[tab.name]) {
            render(view[tab.name]);
        } else {
            that.loading(true);

            if (tab.url.indexOf(".html") === -1) {
                $.ajax({
                    type: "POST",
                    url: tab.url,
                    data: JSON.stringify({
                    }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                }).fail(function (data) {

                    ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
                }).done(function (data) {
                    // Cache the tab's HTML
                    view[tab.name] = data.d;

                    render(data.d);

                    that.loading(false);
                });
            } else {
                $.get(tab.url, function (html) {
                    view[tab.name] = html;

                    render(html);
                }).fail(function (d) {
                    ResPortal.Helpers.notify("Server error", "error");
                }).always(function () {
                    that.loading(false);
                });
            }
        }

        location.hash = tab.name;
    };

    this.selectTab = function (tab) {
        var tb = _(that.tabs).find(function (t) {
            return t === tab;
        });

        if (tb) {
            tb.isSelected(true);

            _(that.tabs).each(function (t) {
                if (t !== tab) {
                    t.isSelected(false);
                }
            });
        } else {
            window.location = window.location;
        }
    };
};

function ResidentTabViewModel() {
    var that = this,
        view = {};

    this.loading = ko.observable(false);

    this.tabs = tabs = [
        {
            dataUrl: null,
            isSelected: ko.observable(true),
            name: "landing",
            onOpen: $.noop,
            title: "Home",
            url: "/Home/Default.aspx/LandingTab"  // TODO
        },
        {
            dataUrl: "/Home/Default.aspx/Account",  // TODO
            isDefault: true,
            isSelected: ko.observable(false),
            name: "account",
            onOpen: function (e, tabData) {
                $.ajax({
                    type: "POST",
                    url: "/Home/Default.aspx/Account",  // TODO
                    data: JSON.stringify({}),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                }).fail(function (data) {
                    ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
                }).done(function (data) {
                    var myAccountVm = new ResPortal.Home.MyAcountViewModel(data.d);

                    if ($("#GetStatementForm").length) {
                        ko.applyBindings(myAccountVm, document.getElementById("GetStatementForm"));
                        ko.applyBindings(myAccountVm, document.getElementById("EditEbillingInfoForm"));
                    }

                    if (tabData && tabData.split && tabData.split("/")[0].toLowerCase() === "statement") {  // tabData.split tests that this event wasn't triggered by a tab change to the My Account tab
                        myAccountVm
                            .currBillId(tabData.split("/").slice(1).join("/"))
                            .viewBill();
                    }
                });
            },
            subMenus: [
                {
                    dataUrl: "/Home/Default.aspx/Account",  // TODO
                    name: "account",
                    onOpen: function () {
                        var acctTab = _.find(that.tabs, function (t) {
                            return t.name === "account";
                        });

                        acctTab.onOpen();
                    },
                    title: "My Account",
                    url: "/Home/Default.aspx/AccountTab",  // Tab
                    visible: ko.observable(true)
                },
                {
                    dataUrl: "/Home/Default.aspx/ManageAccount",
                    name: "manage",
                    onOpen: function () {
                        $.ajax({
                            type: "POST",
                            url: "/Home/Default.aspx/ManageAccount",
                            data: JSON.stringify({}),
                            contentType: "application/json; charset=utf-8",
                            dataType: "json"
                        }).fail(function (data) {
                            ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
                        }).done(function (data) {
                            var bankAccountVm = new ResPortal.Home.BankAccountViewModel(data.d),
                                creditCardAccountVm = new ResPortal.Home.CreditCardAccountViewModel(data.d),
                                residentSummaryVm = new ResPortal.Home.ResidentSummaryViewModel(bankAccountVm, creditCardAccountVm, tabVm, data.d.Data.CurrentBalance, data.d.Data.CurrentLedgerBalance, data.d.Data.HasStopPayment);

                            ko.applyBindings(bankAccountVm, document.getElementById("EditBankAccountForm"));
                            ko.applyBindings(creditCardAccountVm, document.getElementById("EditCreditCardAccountForm"));
                            ko.applyBindings(residentSummaryVm, document.getElementById("middle"));
                        });
                    },
                    title: "Manage Account",
                    url: "/Home/Default.aspx/ManageAccountTab",  // TODO
                    visible: ko.observable(isFundTechProp)
                },
                {
                    dataUrl: "/Home/Default.aspx/MakePayment",  // TODO
                    name: "pay",
                    onOpen: function () {
                        $.ajax({
                            type: "POST",
                            url: "/Home/Default.aspx/MakePayment",  // TODO
                            data: JSON.stringify({
                            }),
                            contentType: "application/json; charset=utf-8",
                            dataType: "json"
                        }).fail(function (data) {
                            ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
                        }).done(function (data) {
                            var autoPayVm = new ResPortal.Home.AutoPayViewModel(data.d),
                                makePaymentVm = new ResPortal.Home.MakePaymentViewModel(data.d),
                                payNearMeVm = new ResPortal.Home.PayNearMeViewModel(data.d);

                            ko.applyBindings(makePaymentVm, document.getElementById("OneTimePaymentPanel"));
                            ko.applyBindings(payNearMeVm, document.getElementById("PnmPaymentPanel"));
                            ko.applyBindings(autoPayVm, document.getElementById("AutoPayPanel"));
                        });
                    },
                    title: "Make a Payment",
                    url: "/Home/Default.aspx/MakePaymentTab",  // TODO
                    visible: ko.observable(true)
                },
                {
                    dataUrl: "/Home/Default.aspx/PaymentHistory",  // TODO
                    name: "payments",
                    onOpen: $.noop,
                    title: "Payment History",
                    url: "/Home/Default.aspx/PaymentHistoryTab",  // TODO
                    visible: ko.observable(true)
                }
            ],
            title: "My Account",
            url: "/Home/Default.aspx/AccountTab"  // TODO
        },
        {
            dataUrl: "/Home/Default.aspx/Personal",  // TODO
            isSelected: ko.observable(false),
            name: "personal",
            onOpen: function () {
                $.ajax({
                    type: "POST",
                    url: "/Home/Default.aspx/Personal",  // TODO
                    data: JSON.stringify({
                    }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                }).fail(function (data) {
                    ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
                }).done(function (data) {
                    var loginVm = new ResPortal.Home.LoginViewModel(data.d),
                        emailVm = new ResPortal.Home.EmailViewModel(data.d),
                        passwordVm = new ResPortal.Home.PasswordViewModel(),
                        securityQuestionsVm = new ResPortal.Home.SecurityQuestionsViewModel(data.d);

                    ko.applyBindings(loginVm, document.getElementById("EditLoginForm"));
                    ko.applyBindings(loginVm, $("#top span.login").get()[0]);
                    ko.applyBindings(emailVm, document.getElementById("EditEmailForm"));
                    ko.applyBindings(emailVm, $("#top span.email").get()[0]);
                    ko.applyBindings(passwordVm, document.getElementById("EditPasswordForm"));
                    ko.applyBindings(securityQuestionsVm, document.getElementById("EditSecurityQuestionsContainer"));
                });
            },
            title: "Personal Information",
            url: "/Home/Default.aspx/PersonalTab"  // TODO
        }
    ];

    this.currentTab = ko.computed(function () {
        var result = _(that.tabs).find(function (tab) {
            return tab.isSelected();
        });

        return result;
    });

    this.formatTabs = function (elements, data) {
        var $ul = $(elements).filter("li").parent();

        if ($ul.children("li").length < that.tabs.length) {
            return;
        }

        $ul.htmlClean();
    };

    this.openTab = function (tab, data) {
        var $mainPanel = $("#MainPanel"),
            isSubMenu,
            render;

        if (!tab) {
            window.location.hash = "";

            return;
        }

        isSubMenu = (tab.isSelected === undefined);

        render = function (html) {
            $mainPanel.html(html);

            if (tab.onOpen) {
                tab.onOpen($.event, data);
            }
        };

        if (!isSubMenu && tab.isSelected()) {
            return;
        }

        if (!isSubMenu) {
            that.selectTab(tab);
        }

        if (tab.url === "") {
            return;
        }

        $mainPanel.html("");

        if (view[tab.name]) {
            render(view[tab.name]);
        } else {
            that.loading(true);

            $.ajax({
                type: "POST",
                url: tab.url,
                data: JSON.stringify({
                }),
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            }).fail(function (data) {
                ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
            }).done(function (data) {
                // Cache the tab's HTML
                view[tab.name] = data.d;

                render(data.d);

                that.loading(false);
            });
        }

        location.hash = tab.name;
    };

    this.selectTab = function (tab) {
        var tb = _(that.tabs).find(function (t) {
            return t === tab;
        });

        if (tb) {
            tb.isSelected(true);

            _(that.tabs).each(function (t) {
                if (t !== tab) {
                    t.isSelected(false);
                }
            });
        } else {
            window.location = window.location;
        }
    };
};

switch (role) {
    case "clientadmin":
        tabVm = new ClientAdminTabViewModel();

        break;
    case "maadmin":
        tabVm = new MaAdminTabViewModel();

        break;
    case "resident":
        tabVm = new ResidentTabViewModel();

        break;
}

$logoutLink
    .text($logoutLink.text())
    .children("span")
    .remove()
    .end()
    .button();

ko.applyBindings(tabVm, document.getElementById("MenuPanel"));
ko.applyBindings(tabVm, document.getElementById("BusyText"));

switch (role) {
    case "clientadmin":
    case "maadmin":
        var defaultTab = tabVm.tabs[0];

        tabVm.openTab(defaultTab, "");

        break;
    case "resident":
        $.ajax({
            type: "POST",
            url: "/Home/Default.aspx/ManageAccount",
            data: JSON.stringify({
            }),
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        }).fail(function (data) {
            if (data.status === 401) {
                window.location = "/";  // TODO

                return;
            }

            ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
        }).done(function (data) {
            var bankAccountVm,
                creditCardAccountVm,
                residentSummaryVm ,
                defaultTab,
                defaultSubMenu,
                hashParts,
                hashTab;

            if (!data.d.Success) {
                return;
            }

            bankAccountVm = new ResPortal.Home.BankAccountViewModel(data.d);
            creditCardAccountVm = new ResPortal.Home.CreditCardAccountViewModel(data.d);
            residentSummaryVm = new ResPortal.Home.ResidentSummaryViewModel(bankAccountVm, creditCardAccountVm, tabVm, data.d.Data.CurrentBalance, data.d.Data.CurrentLedgerBalance, data.d.Data.HasStopPayment);

            ko.applyBindings(residentSummaryVm, document.getElementById("middle"));

            // Open to the requested statement
            // This routine could be expanded to something more robust when needed
            if (window.location.hash.length) {
                hashParts = window.location.hash.split("/");
                hashTab = hashTab = hashParts[0].slice(1).toLowerCase();

                _.each(tabVm.tabs, function (tab) {
                    if (tab.name === hashTab) {
                        defaultTab = tab;
                    }

                    if (!defaultTab && tab.subMenus) {
                        _.each(tab.subMenus, function (subMenu) {
                            if (subMenu.name === hashTab) {
                                defaultTab = tab;
                                defaultSubMenu = subMenu;
                            }
                        });
                    }
                });

                if (defaultSubMenu) {
                    tabVm.selectTab(defaultTab);

                    tabVm.openTab(defaultSubMenu, hashParts.slice(1).join("/"));
                } else {
                    tabVm.openTab(defaultTab, hashParts.slice(1).join("/"));
                }
            }
        });

        break;
}

};

Answer 1

首先，您必须从当前位置删除表达式that.loading(false);。

其次，将此表达式插入到.always(...)回调中，以便由标签.ajax处理程序执行的每个 onOpen子请求：

onOpen: function () {
    $.ajax({
        // ...
    }).fail(function (data) {
        // ...
    }).done(function (data) {
        // ...
    }).always(function(){
        that.loading(false);
    });
},

Answer 2

您可以简单地使用javascript jquery

提供的方法

beforeSend: function(data){
    // you can put your loader here
  },
  success: function(data){
    // events after you data gets load completely
  }