Components

Overview

Components are the basic building blocks in Aurelia. You will find that components are the screens and custom elements that you create. If you think about it, the screens that we create are a form of a custom element. Components are comprised of two files: view and view-model. Because Aurelia understands how to work with components, it is able to provide a robust lifecycle ensuring consistency and stability. This is achieved through the templating engine and dependency injection. Once a component has been instantiated, Aurelia is able to link the view and view-model together via databinding.

Component lifecycle

Every component has a consistent and predictable lifecycle. This gives us the ability to follow the lifecycle of the component. Let’s look at each phase a component goes through:

1. constructor–This is the first function called on the view-model.
2. created(owningView, myView)–This function is called next if the view-model implements it. At this point in the lifecycle, the view has been created and both the view and view-model are connected to their controller. The owningView is the view where the component is declared. If this component has a view, it will be passed as myView.
3. bind(bindingContext, overrideContext)–This function is called next if the view-model implements it. At this point, databinding has been activated on the view and view-model. The bindingContext is the context to which this component is bound. The overrideContext contains information used to traverse the parent hierarchy, and is also used to add any contextual properties the component wants to add.
4. attached()–This function is called next if the view-model implements it. The component is now attached to the DOM.
5. detached()–When the component is removed from the DOM in the future, this function will be called if the view-model implements it.
6. unbind()–After the component is detached, this function will be called if the view-model implements it.

Every one of the hooks is optional. The latter four tend to go hand-in-hand—if you implement bind, then you would most likely implement unbind to clean up; likewise, if you implement attached, then you would most likely implement detached to clean up.