javascript - Aurelia:调整大小/布局更改事件以供查看？

Question

有没有办法订阅 View 以观察 Aurelia 中的调整大小/布局事件？我有一个 Canvas ，我想调整大小。我想知道是否有一种“aurelia”方法可以做到这一点？

我试过:

<div ref="canvasContainer" class="widget-dial-container" resize.delegate="doresize()">
  <canvas ref="canvas" class="widget-dial-canvas" />
</div>

但它从不调用我的 doresize() 方法。

我已经尝试绑定(bind)到 DOM offsetWidth 和 offsetHeight，但这也不起作用(在 vm 中使用和不使用 @bindable canvasContainer;)

Answer 1

如 Kruga 所述，resize 事件仅在 window 本身上受支持。您可以使用 Aurelia 平台抽象层的 PLATFORM 对象以跨平台方式附加到它。您必须运行 jspm install aurelia-pal 才能获取它。如果您不担心跨平台，那么您可以只使用 window 对象。

以下模板和 VM 适合我。我对调整大小计时器实现了限制:

HTML

<template>
  <div style="height: 125px; min-width: 150px; width: 100%;" ref="canvasContainer">
    <canvas ref="canvas" width.one-way="canvasContainer.offsetWidth"></canvas>
  </div>
</template>

模板

import {PLATFORM} from 'aurelia-pal';

export class App {
  resizeTimer = null;
  resizeEventHandler = () => this.resized();

  attached() {
    this.resized();

    PLATFORM.global.addEventListener("resize", this.resizeEventHandler);
  }

  detached() {
    PLATFORM.global.removeEventListener("resize", this.resizeEventHandler);
  }

  resized() {
    clearTimeout(this.resizeTimer);

    this.resizeTimer = setTimeout(() => {
      let ctx = this.canvas.getContext("2d");

      ctx.fillStyle = "green";
      ctx.font = "30px Arial";
      ctx.fillText(`Width: ${this.canvas.width}`,10,50);
    }, 150);
  }
}