Aurelia check clientWidth添付されたイベント

Question

私は要素の絶対幅（それらがテキストを挿入するには狭すぎるかどうかを知るために）を確認するためにaureliaライフサイクルで適切なイベントを見つけようとしています。 私は添付イベントが、（モデルがDOMに添付されて）正しいものであると思ったが、その後、私は要素の幅が1であることを得る：

<template> 

    <div ref="notCompliantDiv" css="width:${displayData.notCompliant}%;">${notCompliantText}</div> 
</template> 

attached() {  
if (this.notCompliantDiv.clientWidth < 10) 
    { 
    this.notCompliantText = ''; 
    } 
} 

Answer 1

ここでの問題は、HTMLがに自分自身を添付しているありますそのページにはクエリーしている要素にAurelia自身で初期化されたcssという属性があります。あなたはこのためにTaskQueueを使いたいと思っています。

タスクキューは、コードの実行をスタックの一番下にプッシュし、Aureliaがカスタム属性やその他のものに対してダイナミックロジックを実行した後に実行します。

import { inject, TaskQueue } from 'aurelia-framework'; 

@inject(TaskQueue) 
export class MyClass { 
    constructor(taskQueue) { 
     this.taskQueue = taskQueue; 
    } 

    attached() { 
     this.taskQueue.queueMicroTask(() => { 
      if (this.notCompliantDiv.clientWidth < 10) { 
       this.notCompliantText = ''; 
      } 
     }); 
    } 
}