访问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变量在构造期间不可用，这在文档中并不清楚。您可以在调用http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-basics/5方法期间或之后的任何时间开始引用上面提到的元素（attached）。

Answer 5

打字稿版本

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