Even though T3 is built with progressive enhancement in mind, that doesn’t mean you can’t dynamically load new modules at runtime. T3 has some lower-level functionality that gives you fine-grained control over module lifecycle, so it’s straightforward to stop or start modules whenever you want.
Since a module is represented by a DOM element, it’s up to you to decide where the DOM element lives in a page. For the purposes of dynamic loading, you may want to have an empty container element somewhere on the page, such as:
Note that this isn’t marked as a T3 module, it’s just a location for a module to be inserted.
The first step is to retrieve some HTML from the server and insert it into the container, such as:
html contains an element with a
data-module attribute, calling this method will inject the module HTML into the container.
There are two ways to start modules:
Box.Application.startAll(). The former is used to start a single module while the latter is used to start all modules within a particular DOM element. So if you expect to have just one module, and you know the element on which
data-module exists, then you can pass the element directly, such as:
If, however, you’re unsure of the module element or you are loading multiple modules within a single element, you may want to use
In either case, the module will start and go through its normal lifecycle.
On the other side, it’s useful to stop modules in order to unload them. You can use
Box.Application.stopAll() to stop already-started modules. As with
startAll(), these methods work on a single module element or a container element, respectively. If the sidebar in the example code wasn’t already empty, you might want to stop any existing modules before removing the HTML, such as:
This is a pattern we use frequently for dynamically loading modules.