Очень большие проблемы дизайна приложений на одной странице

В настоящее время я пишу очень и очень большое одностраничное веб / javascript-приложение.

Я использую технологии ASP.NET MVC4, jquery, knockout.js и ampify.js.

Проблема, с которой я столкнулся, заключается в том, что большинство, если не все примеры одностраничных приложений, предназначены для небольших приложений, в которых все шаблоны скриптов (будь то jquery, панели управления и т. Д.) Находятся в одном файле вместе. с остальной частью HTML-кода. Это хорошо для небольших приложений, но приложение, которое я создаю, представляет собой целое приложение для логистики обслуживания со многими, многими, многими экранами.

Подход, который я использовал до сих пор, заключается в том, что у меня есть внешняя оболочка (мой основной файл index.cshtml), и я использую метод load () jquery для загрузки или, вернее, внедрения конкретного файла, который мне нужен, когда пользователь делает определенный выбор.

пример:

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 ()? У меня есть проблема?

Любые мысли будут с благодарностью. : -)

V / R

Крис

ОБНОВЛЕНИЕ

Я думал, что выложу обновление и как дела пошли и что сработало. После долгих исследований я решил использовать Google AngularJS Javascript Framework. Это упростило испытание в геометрической прогрессии, и я бы определенно посоветовал всем, кто хочет создать большой SPA, взглянуть на него.

Ссылки:

Главный сайт http://angularjs.org/

Потрясающие бесплатные короткие видео на Angular: http: //www.egghead .io / [тысяча сто двадцать два]