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

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

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

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

источник

2015-04-25 WeeHorse

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

вид

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

ViewModel

class ViewModel { 

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

Для получения дополнительной информации об атрибуте реф смотрите здесь: ref способность http://aurelia.io/docs/binding/basics#function-references

источник

2015-04-25 14:24:27

Спасибо! Это то, что я ожидал, я знаю, что в настоящее время руководство Aurelia довольно рудиментарно, но это, безусловно, должно было быть в нем. Итак, я считаю, что Aurelia не добавляет сахара-селекционера. Я закончил с использованием 'this.element.querySelector ('# form-id')' , который достаточно хорош. Я также наткнулся на заглушку для DOM-библиотеки ES6, которая может представлять интерес: [ссылка] (http://www.ericponto.com/blog/2014/10/05/es6-dom-library/) – WeeHorse

Я не ожидал, что DOM для всего aurelia-приложения (в моем случае всего тела) пройден. В некотором смысле, это могло бы быть логичным только для частичной нереста из передаваемого шаблона. Не то, чтобы это было важно. Таким образом, мне не нужно искать другой способ доступа к DOM за пределами области ViewModel. – WeeHorse

обновлен. попробуйте это вместо этого. –

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

источник

2015-04-25 19:39:28 EisenbergEffect

Спасибо! Очень прямо!Чтобы быть ясным, если бы я должен был привязать текстовый ввод для его значения, а также получить доступ к его элементу DOM, я бы сделал как value.bind, так и ref на элементе шаблона, это правильно? Например: '' – WeeHorse

Как и ожидалось (и предпочтет), я мог получить доступ только к ссылочному элементу в своей собственной VM, а не к какой-либо другой виртуальной машине. Поэтому во втором случае, когда я переключаю навигационную видимость, я все еще использую введенный элемент. Или есть лучший способ? – WeeHorse

Вы не можете импортировать модель просмотра и ссылку 'viewModel.my_text_el'? –

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

источник

2015-09-14 15:58:47 LordZardeck

См. Этот ответ для получения дополнительной информации: https://stackoverflow.com/questions/29988599/when-does-binding-to-ref-attribute-become-valid-in -aurelia/29988982 # 29988982 –

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

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

источник

2016-06-14 22:11:24

Это все еще работает? –

не тестировали его в последнее время, он работает для бета 1.2.0 –

Я пробовал это с последней версией во вложенном элементе списка, и хотя элемент работает хорошо, информация о элементе не передается конструктору, поэтому я вынужден использовать 'ref'. Я всегда использую autoinject, поэтому мой синтаксис немного отличается, и логика может отличаться на стороне структуры. –

Машинопись версия

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

источник

2017-08-14 11:30:46 RouR

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

ответ

Смежные вопросы