代码:

App.js

export class App {
  constructor() {
    this.widgets = [{ name: 'zero'}, {name: 'one'}, {name:'two'}];
    this.shipment = { widget: this.widgets[1] };
  }
}

App.html

<template>
  <require from="./widget-picker"></require>
  <require from="./some-other-component"></require>

  <widget-picker widget.bind="shipment.widget" widgets.bind="widgets"></widget-picker>
  <some-other-component widget.bind="shipment.widget"/>
</template>

窗口小部件,picker.js

import {bindable, bindingMode} from 'aurelia-framework';

export class WidgetPicker {
  @bindable({ defaultBindingMode: bindingMode.twoWay, changeHandler: 'widgetChanged'  }) 
  widget;

  @bindable widgets;

  widgetChanged(widget) {
      // Use an Event Aggregator to send a message to SomeOtherComponent
      // to say that they should check their widget binding for updates. …

我正在构建一个拖放工作区，类似于您发现的用于制作模型的工作区。我有一个工作区自定义元素，它有一个更大的嵌套元素，可以缩放和平移。因此，我需要仔细跟踪工作区的大小和位置数据以及所有包含的元素。

在我的自定义元素的附加事件中，我以编程方式将工作区的高度和宽度设置为 JavaScript 对象，该对象绑定到视图中的 css：

工作区CustomElement.js

export class WorkspaceCustomElement {

    constructor(element) {
        this.element = element;
    }

    attached() {
        this.workspace.size = {
            height: this.element.height * 5,
            width: this.element.width * 5
        }
    }
}

工作空间CustomElement.html

<div css="height: ${workspace.height}px; width: ${workspace.width}px; 
    left: ${(element.clientWidth - workspace.width)/2}px; 
    top: ${(element.clientHeight - workspace.height)/2}px;"></div>

现在我在尝试获取子元素的位置时遇到了问题。我也在它们上面附加了回调，但是它们在上面附加的回调之前被评估，所以 css 绑定没有被评估，并且大小和位置是错误的。

我需要添加一个回调后的attached()进行了评估，并绑定已更新。我可以通过使用setTimeouthack来实现这一点，但我不相信这会一直有效。

attached() {
    this.workspace.size = {
        height: this.element.height * 5,
        width: this.element.width * 5
    }

    setTimeout(() => {
        let components …