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

Just as another point I came across when trying to use this for myself, the ref variable isn't available during construction, and this isn't clear in the documentation. You can begin to reference the element as mentioned above (http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-basics/5) anytime during or after the attached method is called.

Answer 5

打字稿版本

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

访问Aurelia中的DOM元素

5 个答案: