JET Reference

JET Component File Structure

• loader.js A RequireJS module defining the composite dependencies for its metadata, View, ViewModel, and CSS. The CSS is loaded via a RequireJS CSS plugin which allows CSS files to be loaded with the 'css!'' prefix. Ensure that the plugin path mapping is defined in your RequireJS config in order to use this prefix. This file also registers the composite tagName. See the packaging and registration section of the API doc for more info on defining a composite module.

Example

• component.json The composite metadata file defining its available properties and methods. This sample does not include any public methods. See the Nested composite demo for an example of metadata defining methods. This sample includes metadata for demo purposes that is not required at run time. See the metadata section of the API doc for the minimal set of fields needed by the composite at run time.

Example

• view.html The View for the composite. This is html with ko and custom components.

Example

• viewModel.js The ViewModel for the composite where methods publicly available on the composite DOM element and previously defined in the composite metadata are defined. Custom events would also be fired here. See the Nested composite demo for an example of these two features. The ViewModel is also where callback methods called at various stages of the composite component's lifecycle can be defined and custom events can be fired.

Example

• styles.css The custom styling for this composite. Note that CSS will not be scoped to the composite component and selectors will need to be appropriately selective.

Example