Aurelia Attached Triggers Before Repeat.for

I'm trying to setup certain logic in Aurelia that would affect DOM nodes looped by repeat.for. If I understand the documentation correctly, the attached() callback of the view is c

Solution 1:

attached is called when the component's DOM element is "attached" to the DOM. There may be child components such as repeated templates that are further down in the queue to be rendered, the easiest thing to do would be to put your logic at the bottom of the queue:

import {inject, TaskQueue} from'aurelia-framework';

@inject(TaskQueue)
exportclassMyComponent {
  constructor(taskQueue) {
    this.taskQueue = taskQueue;
  }

  doSomethingAfterRepeatIsRendered() {
    // your logic...
  }

  attached() {
    this.taskQueue.queueMicroTask({
      call: () =>this.doSomethingAfterRepeatIsRendered();
    });
  }
}

There are better approaches than this, but I would need to know more about what kind of work you need to do with the <li> elements to provide a better answer. It's uncommon to use the TaskQueue directly, often things can be refactored into custom elements or attributes that participate in the composition lifecycle more naturally. For example, if you need to do some jQuery stuff with your <li> elements, the "aurelia way" would be to separate this logic from your view-model using a custom attribute:

do-something.js

import {inject, customAttribute} from'aurelia-framework';
import $ from'jquery';

@customAttribute('do-something')
@inject(Element)
exportclassDoSomethingCustomAttribute {
  constructor(element) {
    // "element" will be the DOM element rendered from the// template this attribute appears on, in this example an <li> elementthis.element = element;
  }    

  // now we don't need the task queue because attached is called when the // <li> element is attached.attached() {
    // this.value is whatever the custom attribute is bound to, in this case// its a "thing" from your "things" array.
    $(this.element).doSomething(this.value);
  }
}

Here's the usage:

app.html

<template><requirefrom="./do-something"></require><ul><lirepeat.for="thing of things"do-something.bind="thing"></li></ul></template>

Solution 2:

Would like to add here another option for catching DOM changes that is pretty simple, works not only for aurelia and could be really useful when you have some dynamic DOM changes triggered on user interaction, you can use MutationObserverhttps://developer.mozilla.org/en/docs/Web/API/MutationObserver

import {DOM} from'aurelia-pal';
...
let mutationObserver = DOM.createMutationObserver(() => {
   // handle dom changes here
});

//start to observe, note you can set different options
mutationObserver.observe(someDomElement, {childList: true, subtree: true, characterData: true});

when you don't neet to observe anymore, you do mutationObserver.disconnect(); usually from detached()