Aurelia在重复之前附加了触发器 [英] Aurelia attached triggers before repeat.for

问题描述

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

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 called after DOM rendering and is the place put this kind of logic in.

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

The problem is that the attached() callback seems to be fired before the repeat.for binding is complete, leaving me with only a partially rendered dom.

为了说明问题：

我有一个自定义元素包含：

I have a custom element containing:

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

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

Once attached is called(), I would expect having a rendered DOM containing all the li elements, instead. A simple dump of the dom shows an empty

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

How can is implement a callback that gets access to those li nodes?

推荐答案

附加。可能有一些子组件，例如重复 ed模板，这些模板在队列的下方要进行渲染，最简单的方法是将逻辑置于底层。 queue：

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)
export class MyComponent {
  constructor(taskQueue) {
    this.taskQueue = taskQueue;
  }

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

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

有比这更好的方法，但我需要了解更多有关使用< li> 元素进行的工作，以提供更好的答案。直接使用TaskQueue并不常见，通常可以将事物重构为更自然地参与组合生命周期的自定义元素或属性。例如，如果你需要用你的< li> 元素做一些jQuery的东西，那么aurelia方式就是将这个逻辑从你的视图模型中分离出来。自定义属性：

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

这篇关于Aurelia在重复之前附加了触发器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！