javascript – Aurelia在repeat.for之前附加了触发器

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

问题是attach()回调似乎在repeat.for绑定完成之前被触发,只留下部分渲染的dom.

为了说明问题：

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

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

一旦调用了attach(),我希望有一个包含所有li元素的渲染DOM.简单地转储dom显示为空

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

解决方法:

当组件的DOM元素“附加”到DOM时调用attach.可能存在子组件,例如在队列中进一步向下渲染的重复模板,最简单的方法是将逻辑放在队列的底部：

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>

标签：javascript,templates,aurelia
来源： https://codeday.me/bug/20190611/1220596.html