• 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

How to Get the Viewmodel Instance From the Aurelia 2 Au-Compose Element

Aurelia 2 · November 2, 2021

Dynamic composition is a crucial part of developing robust user interfaces in Aurelia. If you worked with the compose element in Aurelia 1, you might (or might not have) needed to obtain a reference to the composed view-model itself.

While Aurelia 2 keeps many things the same, how dynamic composition works is a little different. We have the new au-compose custom element, which allows us to achieve the dynamic composition of components, including passing data into them.

I am in the process of porting over an Aurelia 1 application, and it contains a wizard-based step form. The wizard acts as the containing element and queries the child step custom components, allowing specific methods inside of them to be called (validation callbacks and so on).

Now, in Aurelia 1, you could write something like this:

<template>
    <compose view-model="hello" model.bind="myModel" view-model.ref="composeRef"></compose>
</template>

Using view-model.ref, you could access the composed view-model instance. In Aurelia 2, it’s not much different, except the referenced view-model is not the composed view-model.

<au-compose view-model.bind="hello" model.bind="myModel" view-model.ref="composeRef"></au-compose>

Inside of your view-model, which gets the composeRef value, you can access the composed view-model in the composition controller:

attached() {
    this.composedViewModel = this.composeRef.composition.controller.viewModel;
}

The composition property on the provided reference is where the view-model and other associated values/properties for the composed custom element live.

I have created an issue for this on the Aurelia GitHub repository. There is a chance that this might be simplified to be more in line with how Aurelia v1 works. The outcome will either be the viewModel property works like v1, or this behaviour will be better documented.

Aurelia users need to understand that several improvements have been made in Aurelia 2, which address some fundamental shortcomings in how v1 was designed. Aurelia 2 makes use of classes that it instantiates, opposed to the mess of strings and module resolution v1 used, which caused plenty of issues with bundlers and complicated implementing support for things like lazy loading and split bundling.

Dwayne

Leave a Reply Cancel reply

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

It would be good if you explained why this change was made, ie. the purpose of the breaking change and what benefit it brings (if any)?

1
Dwayne
Dwayne
Author
1 year ago

@Kevin Frey

That’s a very good point. I’ve just added in some more text to the bottom and a link to a GitHub issue I have created. There is the chance that this behaviour might be slightly tweaked to work like v1 or just better documented. Part of the reason things like these aren’t 1:1 with Aurelia 1 is because in Aurelia 2 you don’t use strings for referencing components anymore, the router and dynamic composition are two things that come to mind which work on the premise of objects and classes being provided directly.

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