• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Aurelia 2 Lifecycles Explained In As Few Words As Possible

Aurelia 2 · August 27, 2020

With Aurelia 2, everything has been reimagined from the ground up. While the syntax and way you build applications is largely the same as Aurelia 1, there are some key differences and one of those is lifecycles.

When I say lifecycles I am talking about component lifecycles and router lifecycles. If you need a handy reference for what lifecycle you should use, you just found it.

This will not cover all lifecycle methods, just the ones that most people would want to know about such as dom attached and where you should load data from an api.

Component Lifecycles

There are a lot more lifecycles than shown below. These are the ones you want to know for loading data or working with the dom.

beforeBind (equivalent to bind in Aurelia 1) – Fetch data in here, initialize things and set up subscriptions. If you make this method async, Aurelia will wait for your function to resolve before rendering. This is a great place to load data. You can modify the bindings before they’re attached to the view (coerce values and so on).

afterAttach (equivalent to attached in Aurelia 1) – Work with the dom, use 3rd party libraries. Can be async.

afterDetach (equivalent to detached in Aurelia 1) – Clean up anything that touched the dom. Can be async.

Router Lifecycles

canEnter (equivalent to canActivate in Aurelia 1) – Useful for loading data or verifying parameters passed in the URL that are required for the component to render.

enter (equivalent to activate in Aurelia 1) – Similar to canEnter anything loaded in here is not necessarily crucial for the component to render.

canLeave (equivalent to canDeactivate in Aurelia 1) – Can the current user leave the component?

leave (equivalent to deactivate in Aurelia 1) – The user is leaving the current route and heading to another one.

Dwayne

Leave a Reply Cancel reply

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Kevin Frey
Kevin Frey
1 year ago

We’re still using Aurelia 1, but are you sure beforeBind( ) means the same as bind( )? I thought bind( ) meant (in Aurelia 1) that Aurelia had finished setting up all of its bindings between data objects and HTML, and hence the “bound” values were usable.

For example, we frequently used bind( ) to convert attribute values provided as strings in HTML which were declared as bindable properties (especially booleans like “false” and “true”) into real booleans that the remainder of our component class could more easily use. This was because HTML would give you a string value if you assigned it directly (eg. my-attribute=”true”) and a bound attribute might give you an actual bool (eg. my-attribute.bind=”someobject.isBigThing”), so we wanted to normalise the types.

So I’m surprised (that’s all) that beforeBind( ) has the same meaning.

0
Dwayne
Dwayne
Author
1 year ago

@Kevin Frey,

That’s correct. While work on lifecycles is normalising and still ongoing, at the time of writing of this, `beforeBind` is the closest matching lifecycle method to `bind` in Aurelia 1.

Here is a more long-winded explanation from Aurelia 2 WIP docs:

>If your component has a method named “beforeBind”, then the framework will invoke it when it has begun binding values to your bindable properties. In terms of the component hierarchy, the beforeBind hooks execute top-down, from parent to child, so your bindables will have their values set by the owning components, but the bindings in your view are not yet set. This is a good place to perform any work or make changes to anything that your view would depend on because data still flows down synchronously. This is the best time to do anything that might affect children as well. We prefer using this hook over afterBind, unless you specifically need afterBind for a situation when beforeBind is too early. You can optionally return a Promise or ILifecycleTask. If you do so, it will be awaited before the children start binding. This is useful for fetch/save of data before render.

0
Tom Newby
Tom Newby
1 year ago

Hey champ, these have unsurprisingly updated, it looks like `beforeBind` is now `binding`

2

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Which Neural DSP Archetype Plugins Should You Buy?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • How To Mock uuid In Jest
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • Web 3.0 may have died before it even started
  • Deno Raises $21M - but is anyone using it yet?
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex

Recent Comments

  • Jay on Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • john on Deno Raises $21M – but is anyone using it yet?
  • Oranges on How To Store Users In Firestore Using Firebase Authentication
  • Precious on Fixing Sequel Pro SQL Encoding Error For Imported SQL Files
  • James on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz