Aurelia put in the triggers before repeating.

Question

I am trying to set up specific logic in Aurelia that will affect DOM nodes looped by repeat.for. If I understand the documentation correctly, then after the DOM call, the callback () callback () is called, and this place puts this type of logic.

The problem is that the associated () callback seems to fire before repeating. For binding completed, leaving me only partially processed dom.

To illustrate the problem:

I have a custom element containing:

<template>
    <ul>
      <li repeat.for="thing of things"></li>
    </ul>
</template>

After the nested call is called (), I expect the DOM to be displayed instead, containing all the li elements. A simple dom dump shows an empty

How can I implement a callback that accesses these nodes?

Answer 1

attached , DOM "" DOM. , repeat ed , , - :

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

@inject(TaskQueue)
export class MyComponent {
  constructor(taskQueue) {
    this.taskQueue = taskQueue;
  }

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

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

, , , <li>, . TaskQueue , , . , jQuery <li>, " aurelia" , :

-something.js

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

@customAttribute('do-something')
@inject(Element)
export class DoSomethingCustomAttribute {
  constructor(element) {
    // "element" will be the DOM element rendered from the
    // template this attribute appears on, in this example an <li> element
    this.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);
  }
}

:

app.html

<template>
  <require from="./do-something"></require>

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

Answer 2

DOM-, , aurelia , DOM, , MutationObserver https://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});

, mutationObserver.disconnect(); detached()