javascript 访问 Aurelia 中的 DOM 元素

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29863044/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 11:12:44  来源:igfitidea点击:

Access a DOM element in Aurelia

javascripthtmldomaurelia

提问by WeeHorse

How would you go about accessing a DOM element in Aurelia? This is a broad and general question, but I have a feeling there are one or two preferred ways to do this. I have two current cases in Aurelia now:

您将如何访问 Aurelia 中的 DOM 元素?这是一个广泛而笼统的问题,但我觉得有一种或两种首选方法可以做到这一点。我现在在 Aurelia 有两个案例:

In the template I have a form. I want to access the form element in the view-model, on VM canDeactivate(), to interrupt a user navigating away from a half filled out form. So the scope in which I'm trying to access the element can be considered local.

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

In another view-model I want to hide navigation on VM activate(). Navigation resides in another view-model/template pair so the scope may be considered global.

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

回答by Matthew James Davis

As Rob suggested, use ref. For your example:

正如 Rob 建议的那样,使用ref. 对于您的示例:

view

看法

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

viewModel

视图模型

class ViewModel { 

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

For more information on the ref attribute, see here: http://aurelia.io/docs/binding/basics#function-references

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

回答by EisenbergEffect

Use binding system's refcapability. See the docs http://aurelia.io/docs/binding/basics#referencing-elements

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

回答by Eliran Malka

Another option; if your view-model is exposed as a @customElement, its DOM element can be injected in the constructor:

另外一个选择; 如果您的视图模型公开为 a@customElement,则可以将其 DOM 元素注入到构造函数中:

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

回答by LordZardeck

Just as another point I came across when trying to use this for myself, the refvariable 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 attachedmethod is called.

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

回答by RouR

Typescriptversion

打字稿版本

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