Доступ к элементу DOM в Aurelia

Как вы можете получить доступ к элементу DOM в Aurelia? Это широкий и общий вопрос, но у меня есть чувство, что есть один или два предпочтительных способа сделать это. Сейчас у меня два текущих случая в Аурелии:

В шаблоне у меня есть форма. Я хочу получить доступ к элементу формы в модели вида, на VM canDeactivate(), чтобы прервать пользователя, перемещающегося от полузаполненной формы. Таким образом, область, в которой я пытаюсь получить доступ к элементу, может считаться локальной.

В другой модели представления я хочу скрыть навигацию по активации VM(). Навигация находится в другой паре представлений-моделей/шаблонов, поэтому область видимости может считаться глобальной.

Ответ 1

Как предложил Роб, используйте ref. Для вашего примера:

вид

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

ViewModel

class ViewModel { 

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

Подробнее об атрибуте ref см. здесь: http://aurelia.io/docs/binding/basics#function-references

Ответ 2

Использовать систему привязки ref. См. Документы http://aurelia.io/docs/binding/basics#referencing-elements

Ответ 3

Другой вариант; , если ваша модель представления отображается как @customElement, ее элемент DOM может быть введен в конструктор:

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

Ответ 4

Так же, как другой момент, который я натолкнулся при попытке использовать это для себя, переменная ref недоступна во время построения, и это не ясно в документации. Вы можете начать ссылаться на элемент, как указано выше (http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-basics/5) в любое время во время или после вызова метода attached.

Ответ 5

Typescript версия

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