javascript - 在 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
    }
}