javascript - Aurelia で DOM 要素にアクセスする

Question

Aurelia で DOM 要素にアクセスするにはどうすればよいでしょうか? これは幅広い一般的な質問ですが、これを行うには 1 つまたは 2 つの好ましい方法があると感じています。私は現在、Aurelia で 2 つのケースを抱えています。

テンプレートにはフォームがあります。VM canDeactivate() でビューモデルのフォーム要素にアクセスして、半分入力されたフォームからユーザーが移動するのを中断したいと考えています。したがって、要素にアクセスしようとしているスコープはローカルと見なすことができます。

別のビューモデルでは、VM activate() でナビゲーションを非表示にしたいと考えています。ナビゲーションは別のビューモデル/テンプレートペアに存在するため、スコープはグローバルと見なすことができます。

score 31 · Accepted Answer

ロブが提案したように、を使用しますref。あなたの例：

見る

<form ref="myForm"></form>

ビューモデル

class ViewModel { 

    canDeactivate() {
        var form = this.myForm;
        // do stuffs
    }
}

ref 属性の詳細については、こちらを参照してください: http://aurelia.io/docs/binding/basics#function-references

score 7 · Accepted Answer

別のオプション; ビューモデルがとして公開されている@customElement場合、その DOM 要素をコンストラクターに挿入できます。

@customElement
@inject(Element)
export class MyCustomElement {
    constrctor(element) {
        logger.info(element) // ==> <my-custom-element></my-custom-element>
    }
}

score 4 · Accepted Answer

これを自分で使用しようとしたときに遭遇した別のポイントと同様に、ref変数は構築中に使用できず、これはドキュメントでは明確ではありません。上記 ( http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-basics/5attached ) のように、メソッドの呼び出し中または呼び出し後にいつでも要素の参照を開始できます。

score 0 · Accepted Answer

タイプスクリプト版

@transient()
@autoinject
export class ViewModel { 
    myForm: any;
    canDeactivate() {
        var form = this.myForm;
        // do stuffs
    }
}

javascript - Aurelia で DOM 要素にアクセスする

5 に答える 5

Related

Reference