I am currently writing whats going to be a very, very large single page web/javascript application.

Technologies I am using are ASP.NET MVC4, jquery, knockout.js and amplify.js.

The problem I am having is that most if not all of the single page application examples are for smaller applications where having all of the script templates (be it jquery, handlbars, etc...) are all in the same file along with the rest of the html code. This is fine for smaller apps but the application I am building is an entire maintenance logistics application with many, many, many screens.

The approach I took so far is I have an outer shell (my main index.cshtml file) and I am using jquery's load() method to load or rather inject the particular file I need when a user makes a certain selection.

example:

function handleLoginClick(){



    App.mainContentContainer.delegate('#btnLogin', 'click', function() {



        App.loadModule('Home/ProductionControlMenu', App.MainMenuView.render());



    });



}

here's the code for the App.loadModule function:

App.loadModule = function(path, callback){



    App.mainContentContainer.load(App.siteRoot + path, callback);



};

All was going well until I needed to actually start interacting with the various form elements on the newly loaded screen. jquery can't seem to get a handle on them directly. I can't use .live() or .delegate() because they aren't events, they are textboxes and buttons and sometimes I need to change their css classes.

They only way I found is to get a handle on an element from the outer shell (something that wasn't loaded via .load() ) and use jquery's .find() method like so:

  App.mainContentContainer.find('#btnLogin').addClass('disabled');

clearly I don't want to have to do something like this everytime I need to interact with or even retrieve values from a form element.

Does anybody have any ideas as to how I can create a maintainable very large single page application with potentially hundreds of .html files without having to have all that html code located in a single file and still get around this .load() issue I am having?

Any thoughts would be greatly appreciated. :-)

V/R

Chris

UPDATE

I thought I'd post an update and as to how things went and what worked. After much research I decided to go with Google's AngularJS Javascript framework. It simplified the ordeal exponentially and I would definitely, definitely advise all who are looking into making a large SPA to give it a look.

Links:

Main Site
http://angularjs.org/

Awesome free short videos on Angular:
http://www.egghead.io/