0
我在html頁面中有一個菜單欄。當我點擊任何菜單選項加載程序顯示，直到Web用戶控件加載。 但問題是加載程序停止時，用戶控制加載與初始html，但該用戶控件有一些動態數據，需要時間來加載，所以 沒有加載器即將到來。我希望裝載機能夠繼續顯示，直到用戶控制完全加載。 以下是我淘汰賽的js代碼加載程序在knockoutjs中無法正常工作
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;
}
};
這是一個很多提供的方法的代碼來通過。如果你可以創建一個功能片段或者jsFiddle來重現問題，這將會有所幫助。 –