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
Access a DOM element in Aurelia
提问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 ref
capability. 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 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.
正如我在尝试为自己使用它时遇到的另一点一样,该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
}
}