The core application object where components are registered and managed
Initializes the application. This will start modules on the page.
| Parameter | Type | Description |
|---|---|---|
| config | Object | Used to pass configuration information to services. See getGlobalConfig. |
| config.debug | boolean | If true, will print exceptions in console. Otherwise, will catch all exceptions and hide them from users. |
| config.eventTypes | string[] | A list of event types that T3 should respond to. This overrides the default event type list. Event types specified MUST bubble. Available in v2.4.0+ |
The Box.Application object (for chaining purposes).
Box.Application.init();or
Box.Application.init({
debug: true,
foo: { ... },
bar: "baz"
});var eventTypes = [
'click', 'mouseover', 'mouseout', 'mousedown',
'mouseup', 'mouseenter', 'mouseleave', 'mousemove',
'keydown', 'keyup', 'submit', 'change', 'contextmenu',
'dblclick', 'input', 'focusin', 'focusout'
];Box.Application.init({
eventTypes: ['click', 'touchstart', 'touchend']
});Please remember that the events specified must bubble in order to be handled correctly by T3.
Destroys the application. This will stop modules on the page and unregister modules, services, and behaviors.
The Box.Application object (for chaining purposes).
Box.Application.destroy();Register a T3 Service component.
| Parameter | Type | Description |
|---|---|---|
| name | string | Name of service. |
| creator | Function | Creator function for the service. |
The Box.Application object (for chaining purposes).
Box.Application.addService('some-service', function(application) {
return {
foo: function() { ... }
};
});Register a T3 Module component.
| Parameter | Type | Description |
|---|---|---|
| name | string | Name of module. |
| creator | Function | Creator function for the module. |
The Box.Application object (for chaining purposes).
Box.Application.addModule('some-module', function(context) {
return {
init: function() { ... },
destroy: function() { ... }
};
});Register a T3 Behavior component.
| Parameter | Type | Description |
|---|---|---|
| name | string | Name of behavior. |
| creator | Function | Creator function for the behavior. |
The Box.Application object (for chaining purposes).
Box.Application.addBehavior('some-behavior', function(context) {
return {
init: function() { ... },
destroy: function() { ... }
};
});Retrieves an instance of a registered service.
| Parameter | Type | Description |
|---|---|---|
| service | string | Name of service. |
T3 Service or throws an error if it does not exist.
Checks if a service has been registered.
| Parameter | Type | Description |
|---|---|---|
| service | string | Name of service. |
True if the service exists, false otherwise.
Returns a global variable. This function exists to make accessing globals more explicit.
| Parameter | Type | Description |
|---|---|---|
| name | string | Name of global. |
The global variable if it exists or null.
var navigator = Box.Application.getGlobal('navigator');
console.log(navigator.userAgent);Retrieves a configuration value that was passed through init.
| Parameter | Type | Description |
|---|---|---|
| key | string | Config key. |
Object.
Box.Application.init({
username: 'bob'
});
console.log(Box.Application.getGlobalConfig('username')); // Outputs "bob"Retrieves a module’s configuration data from embedded JSON in a ‘text/x-config’ script tag. See Context.getConfig.
| Parameter | Type | Description |
|---|---|---|
| element | HTMLElement | Module root element. |
| name | string | Specific configuration value to retrieve. |
<div id="mod-test-module" data-module="test-module">
<script type="text/x-config">{"foo": "bar"}</script>
...
</div>Object.
var moduleEl = document.getElementById('mod-test-module');
// outputs {"foo": "bar"}
console.log(Box.Application.getModuleConfig(moduleEl));
// outputs "bar"
console.log(Box.Application.getModuleConfig(moduleEl, 'foo'));
// outputs null
console.log(Box.Application.getModuleConfig(moduleEl, 'baz'));Begins the lifecycle of a module (registers and binds listeners).
| Parameter | Type | Description |
|---|---|---|
| element | HTMLElement | DOM element associated with module to be started |
The Box.Application object (for chaining purposes).
<div id="mod-test-module" data-module="test-module">
...
</div>var moduleEl = document.getElementById('mod-test-module');
Box.Application.start(moduleEl);Starts all modules contained within an element.
| Parameter | Type | Description |
|---|---|---|
| element | HTMLElement | DOM element which contains modules |
The Box.Application object (for chaining purposes).
<div id="content">
<div id="mod-test-module" data-module="test-module">
...
</div>
<div id="mod-another-module" data-module="another-module">
...
</div>
</div>var contentEl = document.getElementById('content');
Box.Application.startAll(contentEl); // starts both modulesEnds the lifecycle of a module (unregisters and unbinds listeners).
| Parameter | Type | Description |
|---|---|---|
| element | HTMLElement | DOM element associated with module to be stopped |
The Box.Application object (for chaining purposes).
<div id="mod-test-module" data-module="test-module">
...
</div>var moduleEl = document.getElementById('mod-test-module');
Box.Application.stop(moduleEl);Stops all modules contained within an element.
| Parameter | Type | Description |
|---|---|---|
| element | HTMLElement | DOM element which contains modules |
The Box.Application object (for chaining purposes).
<div id="content">
<div id="mod-test-module" data-module="test-module">
...
</div>
<div id="mod-another-module" data-module="another-module">
...
</div>
</div>var contentEl = document.getElementById('content');
Box.Application.stopAll(contentEl); // stop both modulesDetermines if a module represented by the HTML element is started. If the element doesn’t have a data-module attribute, this method always returns false.
| Parameter | Type | Description |
|---|---|---|
| element | HTMLElement | DOM element which contains modules |
Returns true if module is started. False, otherwise.
<div id="mod-test-module" data-module="test-module">
...
</div>var moduleEl = document.getElementById('mod-test-module');
console.log(Box.Application.isStarted(moduleEl)); // Returns false
Box.Application.start(moduleEl);
console.log(Box.Application.isStarted(moduleEl)); // Returns trueBroadcasts a message to all registered listeners
| Parameter | Type | Description |
|---|---|---|
| name | string | Name of the message |
| data | any | Custom parameters for the message |
The Box.Application object (for chaining purposes).
<div id="mod-test-module" data-module="test-module">
...
</div>Box.Application.broadcast('some-message');Box.Application.broadcast('statechanged', {
foo: 'search',
bar: 'home'
});Signals that an error has occurred. If in debug mode, an error is thrown. Otherwise, an “error” event is fired.
| Parameter | Type | Description |
|---|---|---|
| exception | Error | An error object |
Box.Application.reportError(new Error('Invalid User ID'));Signals that a warning has occurred. If in debug mode, console.warn is called. Otherwise, a “warning” event is fired. Available in v2.4.0+
| Parameter | Type | Description |
|---|---|---|
| data | * | An arbitrary string or object |
Box.Application.reportWarning('Line is almost full!');See EventTarget.on
See EventTarget.off
See EventTarget.fire