10

これは、この質問のフォローアップです: Access a DOM element in Aurelia

スクリーン アクティベーション ライフサイクルに、バインドの設定後に コードを実行できるフックはありますか? 現在、バインディングがまだ設定されていないときにフックが呼び出されたref後、ある時点でアクティブになる期間があるようです。これをテストするには、最新の (v0.13.0) スケルトン ナビゲーション リポジトリのクローン バージョンの下部近くにを追加し、次のようにビュー モデル内の参照の存在をテストします。activateref<div ref="myDiv"></div>welcome.html

export class Welcome{
  heading = 'Welcome to the Aurelia Navigation App!';
  firstName = 'John';
  lastName = 'Doe';

  testMyDiv() {
    console.log("Getting my div")
    console.log(this.myDiv)
  }

  get fullName(){
    this.testMyDiv()
    return `${this.firstName} ${this.lastName}`;
  }

  welcome(){
    alert(`Welcome, ${this.fullName}!`);
  }
}

テンプレートの下部のスニペット...

      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <div ref="myDiv"></div>
  </section>
</template>

これは、コンソールに表示されるもののスナップショットです...

welcome.js:10 Getting my div
welcome.js:11 undefined
welcome.js:10 Getting my div
welcome.js:11 undefined
welcome.js:10 Getting my div
welcome.js:11 <div ref=​"myDiv" class=​"au-target">​&lt;/div>​
welcome.js:10 Getting my div
welcome.js:11 <div ref=​"myDiv" class=​"au-target">​&lt;/div>​
(continues)

このようなプリントアウトは無期限に続きます。名前が変更された場合に画面を更新するために定期的に呼び出されていることがわかりfullName()ます（これはダーティチェックだと思います）...しかし、最初に、参照divされたものがのプロパティとして有効でない期間があることがわかりますビューモデル、そしてそれは有効です。誰かがこれを説明できますか？ref有効になった後にビューモデルにフックする方法はありますか?

4

1 に答える 1

9

通常、バインディングはbindコールバック後に処理され、使用可能になります。ただし、この場合は DOM 要素にアクセスする必要があるため、ViewModel をバインドしてビューにアタッチする必要があるため、attachedコールバックを使用します。

class ViewModel { 

    bind() {
        this.refItem == undefined; // true
    }

    attached() {
        this.refItem == undefined; // false
    }
}

コメントで指摘したように、アクティベーター コールバックの詳細については、http: //aurelia.io/docs.html#extending-htmlを参照してください。

于 2015-05-01T14:41:14.107 に答える