• 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
7 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
7 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
6 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
  • Waiting for an Element to Exist With JavaScript
  • Thoughts on the Flipper Zero
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Reliably waiting for network responses in Playwright
  • Wild Natural Deodorant Review

Recent Comments

  • Dwayne on Is Asking Developers How to Write FizzBuzz Outdated?
  • kevmeister68 on Is Asking Developers How to Write FizzBuzz Outdated?
  • Kevmeister68 on Start-Ups and Companies That Embrace Work From Anywhere Will Be More Likely to Survive the Coming Recession in 2023
  • kevmeister68 on What Would Get People Back Into the Office?
  • Dwayne on PHP Will Not Die

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz