Question

我正在尝试在Aurelia中设置某些逻辑，这些逻辑会影响由repeat.for循环的DOM节点。如果我正确理解文档，那么在DOM渲染之后调用视图的附加（）回调，并且是放置这种逻辑的地方。

问题是，在repeat.for绑定完成之前，似乎触发了附加的（）回调，只留下部分渲染的dom。

为了说明问题：

我有一个包含以下内容的自定义元素：

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

一旦调用了attach（），我希望有一个包含所有li元素的渲染DOM。简单地转储dom显示空

如何实现一个可以访问那些li节点的回调？

Answer 1

当组件的DOM元素“附加”到DOM时，将调用

attached。可能存在诸如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并不常见，通常可以将事物重构为更自然地参与组合生命周期的自定义元素或属性。例如，如果您需要使用<li>元素执行一些jQuery操作，“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 { {3}}

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()

Aurelia在重复之前附加了触发器

2 个答案: