web-dev-qa-db-ja.com

AureliaのDOM要素にアクセスする

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

テンプレートにはフォームがあります。 VM canDeactivate（）で、view-modelのフォーム要素にアクセスして、半分記入されたフォームから移動するユーザーを中断します。要素にアクセスするには、ローカルと見なすことができます。

別のビューモデルでVM activate（）のナビゲーションを非表示にします。ナビゲーションは別のビューモデル/テンプレートのペアにあるため、スコープはグローバルと見なされます。

javascripthtml5domaurelia
26
WeeHorse

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

view

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

viewModel

class ViewModel { 

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

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

29
Matthew James Davis

バインディングシステムのref機能を使用します。ドキュメントを参照してください http://aurelia.io/docs/binding/basics#referencing-elements

11
EisenbergEffect

別のオプション; ビューモデルが@customElement、そのDOM要素をコンストラクターに挿入できます。

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

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

4
LordZardeck

TypeScriptバージョン

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