I searched the internet and really can't find a good answer to this question.
Imagine there is a View that contains a simple tab-element. Each tab-content is loaded dynamically (via ajax) when the tabs header is clicked. The View itself has the document.ready-handler to do things when the View (not the partial) is loaded. (e.g. init the Views javascript module).
One partial contains a list of elements which can be deleted. Clicking the Delete button should open a modal dialog to let the user confirm the deletion.
What would be the best way to handle this?
The View does not know about the Partial which has been loaded and vice versa.
The View has some kind of module which will have a function
deleteElement(id){ //… }
How should this be called from within the partial?
Should the partial know about the deleteElement? What if it is called inside another View which module does not have such a function?
Should the deleteElement be declared global? Does this make sense when only needed in some specific context?
Or is the whole idea of splitting into single javascript-modules per View already the wrong decision I've made? (My thoughts was to keep a single .js file which is only loaded when really needed, keep code clean, separation of concerns, …)
Any links, hints, workarounds or ideas would be greatly appreciated.
Best Answer
Practical solution :
Jquery and other frameworks will allow you to bind to events for which the element which fires them has not been loaded yet.
So your View, or js module or whatever, can bind to the deleteButton.Click event even though there are no delete buttons yet loaded on the page.
Philosophical thoughts :
When you start doing single page apps with lots of JavaScript logic in them, I feel that you have to shift your perception from the point of view of the website server side being the 'app' to the JavaScript being the app and the server a service which the app can call.
This view helps you resolve these kind of 'where should I put X' questions, the 'View' becomes a ViewModel from the point of view of the JavaScript. Which logically moves you to making it JSON and having the JS update the HTML with some sort of template.
Once you get to this point you might as well start using a framework like angular to do the templating and binding, which gives you a nice clear separation of concerns.
The other point of view I think would be to keep the JavaScript as just a decorative thing. This keeps it firmly in the view, but then you page should run equally well with JavaScript turned off. Which your dynamic loading of the tabs would not do.