Scope, Loading Order and Extension Points
- App level: Scripts affecting every page of the Atomia User Panel. Loaded both from external script files and as inline scripts.
- Section level: Scripts affecting a collection of related pages, e.g. email section or databases section in the Atomia User Panel. Loaded from external script files.
- Page level: Initialization code for the current page. Loaded as inline scripts.
- Shared/_CommonScripts.ascx (including shared.js)
- script tag entry point
vendor.js (app level file)
Third party libraries and plugins, the main of which are knockout.js, jQuery, jquery-datatables, and (parts of) jQuery UI.
Shared/_CommonResources.ascx (app level script tag)
Shared/_CommonScripts.ascx (app level script tag)
Global plugin settings and initialization of app wide knockout view models on the top level view model Atomia.VM. Do not override unless fully replacing app level scripts.
shared.js (app level file)
Shared/_CustomScripts.ascx (app level)
Theme extension point for loading or initializing scripts that should be available in the whole app. Placed after the default scripts so they can be changed and extended.
<section>/_Resources.ascx (section level script tag)
main.js (section level file)
<section>/_<ViewName>Scripts.ascx (page level script tag)
Mostly initialization and attachment to Atomia.VM of knockout view models that are used by the page. Do not override unless fully replacing scripts on a page.
<section>/_<ViewName>ScriptsCustom.ascx (page level)
Theme extension point for loading or initializing scripts that should be available on the page level. Placed after the default scripts so they can be changed and extended.
knockout entry point (app level script tag)
Call to ko.applyBindings on the Atomia.VM view model to initialize the knockout bindings on the page.
Third party libraries
Knockout is available globally as ko, and related plugins like Knockout Postbox are located under this namespace as well.
jQuery and related plugins are available under the standard $ and jQuery.
The Atomia namespace contains all modules and resources provided by Atomia.
Contains view model constructors that are used in every page or many different sections of the Atomia User Panel, like AutopickerViewModel and SessionManagerViewModel. It also contains utilities like notify (used to trigger notifications) and renderKoTemplate (used to render a knockout template as a string).
Makes available a selection of URLs that are used by the current page. They are named after the controller and action in case of internal links. So the action Edit on the WebsitesController will be available as Atomia.URLS.websitesEdit. Some URLs also have some value that should be replace for the URL to be usable. These are always delimited by the underscore character, so e.g. for the Atomia.URLS.websitesEdit URL to be usable you must replace the _adSearchQuery_ substring with the id of the website you would like to edit.
This is where most of the Atomia view model constructors are located. This namespace depends on what section of the Atomia User Panel the page is in. So e.g. the WebsitesListViewModel is located under the Atomia.Websites namespace. Only the relevant section namespace is loaded for each page.
- Atomia.VM (root view model)
- sessionManager (app level, SessionManagerViewModel instance)
- loading (app level, LoadingAnimationViewModel instance)
- menuModel (app level, MenuViewModel instance)
- sites (page level, websites index, WebsitesListViewModel instance)
- uncheckEmail (page level, websites index, UncheckMailSupportDialog instance)
- delWebsite (page level, websites index, DeleteWebsiteDialog instance)
- editWebsite (page level, websites index, EditWebsiteDialog instance)
Usually the view model hierarchy is quite flat like above, but a few complicated a page level models contain sub view models of their own.
App level view models are initialized and attached to Atomia.VM in the Shared/_CommonScripts.ascx partial view. The page level view models are initialized and attached to Atomia.VM in the <Section>/_<ViewName>Scripts.ascx partial views.
Generally, the different view models attached to Atomia.VM for a page do not know directly about each other. All communication between view models happens via a publish/subscribe system with the ko.postbox knockout plugin. This means that any view model can be swapped out for a custom one; it just has to listen to and handle the same events. Completely new and custom view models can also subscribe and do their own thing with events published by the existing view models on a page.