访问Aurelia中的DOM元素

Question

您将如何访问Aurelia中的DOM元素？ 这是一个广泛而普遍的问题，但我感觉有一两种首选方法可以做到这一点。 我现在在Aurelia有两个当前案例：

在模板中我有一个表格。 我想访问视图模型中的表单元素，在VM canDeactivate（）上，以中断用户导航离开半填充表单。 因此，我尝试访问该元素的范围可以被视为本地。

在另一个视图模型中，我想在VM activate（）上隐藏导航。 导航驻留在另一个视图模型/模板对中，因此可以将范围视为全局。

Answer 1

正如Rob建议的那样，使用ref 。 对于你的例子：

视图

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

视图模型

class ViewModel { 

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

有关ref属性的更多信息，请参见此处： http ： //aurelia.io/docs/binding/basics#function-references

Answer 2

使用绑定系统的ref功能。 请参阅文档http://aurelia.io/docs/binding/basics#referencing-elements

Answer 3

另外一个选项; 如果您的视图模型公开为@customElement ，则可以在构造函数中注入其DOM元素：

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

Answer 4

正如我在尝试自己使用它时遇到的另一点， ref变量在构造期间不可用，这在文档中并不清楚。 您可以在调用attached方法期间或之后的任何时间开始引用上面提到的元素（ http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-basics/5 ）。

Answer 5

打字稿版本

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