• 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 ViewModel Lifecycle Methods

Aurelia 1 · October 23, 2015

As much as I love working with Aurelia, the documentation can be confusing for newcomers to the framework (forgivable considering it is so new and evolving). The purpose of this post is to quickly touch upon ViewModel methods that get called at various parts of the ViewModel activation process.

The two methods I have found myself using the most are attached and detached as sadly a project I am working on still uses jQuery libraries like Select2 for creating custom styled dropdowns.

Once you become familiar with these events, you can understand the right place and time during Aurelia’s execution context when you should perform a particular task or execute a plugin on the DOM.

attached()
This method gets called when the View is attached to the DOM. Here is where you will do your DOM manipulation, wrap elements in jQuery objects or whatever you like. All work with the DOM (especially plugins) should be done within this method.

detached()
This method is called when the View is detached from the DOM. If you registered events in the attached method, you would probably unbind them in here. This is your chance to free up some memory and clean the slate.

bind()
This method happens after binding occurs, but before the DOM attachment. This is where the DataBinding engine binds the contents of the View.

unbind()
This method is called when the DataBinding engine is unbound from the View.

Conclusion

Knowing about the above methods on your ViewModel’s will save you a tonne of headaches down the track. If you have any questions as to which method is the right one to use or more in-depth information, just leave a comment for a timely response.

Dwayne

Leave a Reply Cancel reply

4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Forest
Forest
6 years ago

Great job on this blog. We’re using Aurelia and your blog is one of the top resources I’ve found.

Regarding this post, what are some use cases you’ve ran into where you needed to leverage unbind?

0
Dwayne
Dwayne
Author
6 years ago

Cheers Forest.

In the instance of unbind, the only use-case I think it serves is for cleaning things up. If you’re extending how the binding is being handled, in the unbind method you would clean up any custom binding behavior you have created.

0
Zhenyang
Zhenyang
5 years ago

This is very helpful! Thanks for sharing!

0
Kevmeister
Kevmeister
5 years ago

Hi Dwayne, I think it would be worth differentiating between views and components (views being the class/object instantiated within a , components being custom-elements usually), and bring activate/deactivate into the mix with the lifecycles, and where they fit with respect to each other. Wouldn’t hurt mentioning also and how compose will then attempt activate/deactivate on a view/component.

I also prefer to see your lifecycle methods listed in their actual lifecycle order and numbered.

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • How To Mock uuid In Jest
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Which Neural DSP Archetype Plugins Should You Buy?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • Removing A Character From The Start/End of a String In Javascript
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz