Class Component
Index
Constructors
constructor
To initialize a component its dependecies have to be injected first,then its attached attributes have to be processed and finally thedefined bindings have to be set up.
This has to be done for all definitions along the prototype chain to makesure inherited features don't break.
Returns Component
Properties
Static attributes
A map containing keys of properties that will pull in their value froma given attribute of the defining element. The values are strings thatdescribe the binding that will be created as well as the attribute name.In case you want the attribute's value to be treated as an expression youcan use one of the following symbols as a first character:
- '?': Will compile the expression once an set the property's value to the result.
- '.': Will update the property's value to the result of the expression whenever it changes.
- ':': Will keep the property's value in sync with the value at the path given in the attribute's value.
If one of these characters is found they will be trimmed from the string.If the string is not empty after that it will be used as the name of attribute.Otherwise the attribute's name is assumed to be equal to a hyphenated versionof the property name.
Example
export default class MyComponent extends Component { static attributes = { // <my-component use-as-is=""></my-component> useAsIs: '', // <my-component compile-once="myVar + 1"></my-component> compileOnce: '?', // <my-component bind-one-way="myVar + 10"></my-component> bindOneWay: '.', // <my-component my-attribute="myVar"></my-component> bindTwoWayAndDefineName: ':my-attribute' };}Static bindings
This static property lets you define listeners that will be executed whenproperties of the component change.
It should be a map where the keys are paths that should be watched on the component andthe values are names of methods that will be invoked on the component instance.
Example
In the following example you can see a component that reacts to changesin the size of the defining element.
export default class MyComponent extends Component { static inject: {element: Element}; static bindings = { 'element.clientHeight': 'heightChange' }; width: number; heightChange(height: number) { this.width = height * 2; }}Static inject
This static property defines dependencies that will be injected intoyour component's instance. This should be a map of property names as keysand your desired dependency as its value.
When the dependency is of type Function then it is assumed to bea class and an instance of it will be returned. This will always bea singleton so you deal with the same instance in any place.
Of course there's an exception to the rule. It is possible tospecifically define what instance of a class will be returned.Mahalo automatically does that for a few classes:
- Element: Will return the defining element of the component.
- Component: Will return the parent component.
- ComponentController: Will return the controller of the component.
- ComponentGenerator: Will return the generator of the component's controller.
- Scope: Will return the local scope in which the component was defined.
- Custom Component: Will traverse up the tree of controllers and find the next instance of the given component.
Read more about ensuring what dependencies will be returned on the mahalo/app/injector page.You might need this for mocking in your tests.
Example
export default class MyComponent extends Component { static inject = {element: Element};}Static locals
This static property defines which properties of the componentshould be available in its local scope which will be used by thecomponent's behaviors as well as by the defining element's children.
Values of this array represent the name of one of the component'sproperties that will be pushed to the local scope.
Example
export default class MyComponent extends Component { static locals = ['firstName', 'lastName'];}Static template
When a string is given it must contain the html of the component's template.
In general you should not make use of this at all. Your template should bein a separate file with the same name and in the same folder as your component'sTypeScript file. This feature is only for advanced usage (for example having an emptytemplate by setting this to an empty string) or rapid prototyping.
Methods
enter
Returns void
leave
Returns void
ready
Returns void
remove
Returns void
All Mahalo applications are component based. For your applicationcontainer and every single DOM element inside of it Mahalo will createa component instance for you. This instance belongs to a ComponentControllerthat is part of a tree that represents your application.
A component can consist of two different parts: A template and a class.It must have at least one of them but can also have both. To link themtogether they must reside in the same folder and have the same name withdifferent extensions: .html for the template and .ts for your code behind.
Every time you want a component to do more than just render a templateyou have to create a new class that extends this one. This class mustbe the default export of the components .ts file.
For the most common use cases there are a few static properties thatyou can define to make life easier. You can read more about themfurther down the page.
Example
This is just a very simple example that defines a property that can thenbe used in the template. Let's assume the following code is writtenin a file called my-component.ts in the root folder.
import {Component} from 'mahalo';export default class MyComponent extends Component { myProperty: string = 'Mahalo'}The component's template is also in the root folder and is named my-component.html.
<h2>${myProperty}</h2>Now you can use this component to output a headline reading Mahalo in anothertemplate. For example app.html which is located besides the component files andhas the content shown below.
<use component="./my-component"/><my-component><my-component>In the above code you can see
{ default } from mahalo/app/component