我目前正在编写一个非常非常大的单页 web/javascript 应用程序。
我使用的技术是 ASP.NET MVC4、jquery、knockout.js 和 amplify.js。
我遇到的问题是,大多数(如果不是全部)单页应用程序示例都适用于较小的应用程序,其中所有脚本模板(无论是 jquery、handlbars 等)都与其余的都在同一个文件中的html代码。这对于较小的应用程序来说很好,但我正在构建的应用程序是一个完整的维护物流应用程序,有很多很多屏幕。
到目前为止,我采用的方法是我有一个外壳(我的主 index.cshtml 文件),并且我使用 jquery 的 load() 方法来加载或更确切地说是在用户进行特定选择时注入我需要的特定文件。
例子:
function handleLoginClick(){
App.mainContentContainer.delegate('#btnLogin', 'click', function() {
App.loadModule('Home/ProductionControlMenu', App.MainMenuView.render());
});
}
这是 App.loadModule 函数的代码:
App.loadModule = function(path, callback){
App.mainContentContainer.load(App.siteRoot + path, callback);
};
一切都很顺利,直到我需要真正开始与新加载的屏幕上的各种表单元素进行交互。jquery 似乎无法直接处理它们。我不能使用 .live() 或 .delegate() 因为它们不是事件,它们是文本框和按钮,有时我需要更改它们的 css 类。
我发现他们唯一的方法是从外壳中获取一个元素的句柄(不是通过 .load() 加载的东西)并使用 jquery 的 .find() 方法,如下所示:
App.mainContentContainer.find('#btnLogin').addClass('disabled');
显然,每次我需要与表单元素交互甚至从表单元素中检索值时,我都不想做这样的事情。
是否有人对我如何创建一个可维护的非常大的单页应用程序有任何想法,其中可能包含数百个 .html 文件,而不必将所有 html 代码放在一个文件中,并且仍然可以解决这个 .load() 问题有?
任何想法将不胜感激。:-)
视听/视听
克里斯
更新
我想我会发布一个更新,以及事情的进展和效果。经过大量研究后,我决定使用 Google 的 AngularJS Javascript 框架。它成倍地简化了考验,我肯定会建议所有正在考虑制作大型 SPA 的人来看看。
链接:
Angular 上很棒的免费短视频: http ://www.egghead.io/