BackgroundClass Behavior

Behaviors are one of the core concepts in Mahalo. A behavior issome kind of functionality that can be added to every componentby setting an attribute to the defining DOM element. The name ofthe attribute is derived from the file name but can also bespecified in the template that uses the behavior.

All custom behaviors that you create in your Mahalo applicationmust extend this class. It handles dependency injection for andalso gives you an easy to use interface for setting up typicalfeatures of behaviors.

Example

In the following example you can see a behavior that updatesa property on the component that it belongs to. Of course such abehavior would only affect components that make use of that property.

import {Behavior, Component} from 'mahalo';export default class MyBehavior extends Behavior {    static inject = {component: Component};    static update = 'update';    update(newValue) {        this.component.myBehavior = newValue;    }}

To use this behavior you can use something like the following ina template. This assumes that the behavior was defined in a filenamed my-behavior.ts and the template that uses it is in the samefolder.

<use component="./my-component"/><use behavior="./my-behavior" select="awesome-behavior"/><my-component awesome-behavior=""></my-component>
alias

{ default } from mahalo/app/behavior

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

  • To initialize a behavior its dependecies have to be injected first,then the binding to its value has 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.

    Parameters
    • value: string

      The actual string literal of the attribute used for the current behavior instance.

    Returns Behavior

Properties

Static bindings

bindings:Object

This static property lets you define listeners that will be executed whenproperties of the behavior change.

It should be a map where the keys are paths that should be watched on the behavior instanceand the values are names of methods that will be invoked on it when the valueat a path changes.

Example

The following example shows a behavior that reacts to a change in the height ofthe defining element.

export default class MyBehavior extends Behavior {    static inject: {element: Element};    static bindings = {        'element.clientHeight': 'heightChange'    };    width: number;    heightChange(height: number) {        this.width = height * 2;    }}

Static inject

inject:object

This static property defines dependencies that will be injected intoyour behavior instance. It should be a map of property names as keys andyour 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 element on which the behavior was defined.
  • Component: Will return the component of the element the behavior was defined on.
  • ComponentController: Will return the controller of the behavior.
  • ComponentGenerator: Will return the generator of the behavior's controller.
  • Scope: Will return the local scope in which the behavior 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 MyBehavior extends Behavior {    static inject = {        element: Element,        component: Component    };}

Static update

update:string

This static property defines the name of an instance method thatwill be executed when the bahavior's value changes. Thatsimply means that the result of the expression that was createdfrom the value of the attribute used to define the behavior ina template has changed.

This will always create a one way binding.

Example

The following bahavior will execute its update method everytime the result of the expression given as an attribute valuechanges.

export default class MyBehavior extends Behavior {    static update = 'update';    update() {}}

Methods

remove

  • remove(): void
  • Returns void