Accessing DOM elements and composition lifecycle for non-viewModels in Aurelia -

i have application closely tied dom. need keep track of size , position of elements represent objects behind them.

myviewmodel.js

export class myviewmodel {      // root view model has important properties      // other functions , objects need use     constructor() {         this.importantproperty = 'veryimportant';         this.things = [];     }      // create things in view model     // represented in dom     creatething() {         this.things.push({             isathing: true         });     }      // things things in view model      // depend on root view model     dosomethingwiththing(thing, property) {         thing[property] = `${this.importantproperty}${property}`;     }      // need know dom representation     // of things in view model     doanotherthingwiththing(thing) {         console.log(`the height of thing ${thing.height}`);     }      lookandseewhatsizethisthingis(element, thing) {         thing.height = element.clientheight;         thing.width = element.clientwidth;         console.assert('that easy!');     } } 

myviewmodel.html

<template>      <!-- these things can change in size , shape, , have         no idea until runtime     <div repeat.for="thing of things"          <!-- ideally i'd call -->         composed.delegate="lookandseewhatsizethisthingis($element, thing)">          <img src="img/${$index}.png" />     </div>  </div> 

is there way today?

since customattribute has access composition lifecycle, can create customattribute triggers event on element fires in attached() callback.

import {autoinject} 'aurelia-framework';  @inject(element) export class attachablecustomattribute {      constructor(element) {         this.element = element;     }      attached() {       this.element.dispatchevent(           new customevent('attached'));     } } 

and use other event binding, exception not bubble, , we must use trigger instead of delegate.

<div repeat.for="thing of things"     attached.trigger="lookandseewhatsizethisthingis($event, thing)" attachable>     <img src="img/${$index}.png" /> </div>