在 Aurelia 中访问 DOM 元素

Question

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

在模板中我有一个表单。我想在 VM canDeactivate() 上访问视图模型中的表单元素，以中断用户离开半填写的表单。所以我试图访问元素的范围可以被认为是本地的。

在另一个视图模型中，我想隐藏 VM activate() 上的导航。导航驻留在另一个 view-model/template 对中，因此范围可以被认为是全局的。

Answer 1

按照 Rob 的建议，使用 ref。例如：

查看

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

viewModel

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

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

Answer 4

另一种选择； 如果您的视图模型公开为 @customElement，它的 DOM 元素可以注入到构造函数中：

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

Answer 5

Typescript 版本

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

在 Aurelia 中访问 DOM 元素

Access a DOM element in Aurelia

html

javascript

dom

aurelia