onLoad в веб-компоненте Lightning
Перейти к содержимому
sanketthoughts Веб-компонент Lightning Оставить комментарий
У вас есть необходимость что-то сделать при загрузке в веб-компоненте Lightning? В компонентах Aura у вас есть обработчик событий init
, но какова альтернатива обработчику событий init в веб-компонентах Lightning?
Замена обработчика событий init
в компоненте Aura стандартным JavaScript connectCallback()
метод в веб-компоненте Lightning.
Component Design
Веб-компонент Lightning содержит три файла в своем пакете компонентов. Файл JavsScript содержит методconnectCallback(), который срабатывает при загрузке компонента. Мы создали веб-компонент Lightning с именем onloadLWC . В комплекте три файла.
Код
onloadLWC.html
HTML-файл содержит Lightning-input с атрибутом value с отслеживаемым свойством inputValue. Всякий раз, когда свойство inputValue изменяется, экран перерисовывается, чтобы отразить обновленное значение.
<шаблон> <дел>
onloadLWC.js
Файл JavaScript содержит методconnectedCallback(), который срабатывает при каждой загрузке компонента. В нашем сценарии мы устанавливаем значение свойства inputValue.
import {LightningElement, track} из "lwc"; класс экспорта по умолчанию OnloadLWC расширяет LightningElement { @отслеживать входное значение; // инициализируем компонент связанныйCallback () { это.inputValue = 5; } }
onloadLWC.js-meta.xml
Файл конфигурации определяет значения метаданных для компонента, включая конфигурацию проекта для Lightning App Builder и Community Builder.
sforce.com/2006/04/metadata" fqn="onloadLWC"> 46.0 истина <цели>lightning__RecordPage lightning__AppPage lightning__HomePage
Демонстрация (onLoad в веб-компоненте Lightning)
Этот компонент показывает пример выполнения каких-либо действий при загрузке веб-компонента Lightning. Здесь мы устанавливаем значение поля ввода равным 5 каждый раз, когда оно загружается.
Вы также хотели бы прочитать мой ответ о платформе Salesforce StackExchange о загрузке Javscript в LWC.
Продолжайте проверять веб-компонент Lightning в дневниках Salesforce на наличие последних обновлений Lightning в Salesforce.
Нравится:
Нравится Загрузка…
LightningLightning componentLightning Web Components
on — Alpine.js
x-on
позволяет легко запускать код для отправленных событий DOM.
Вот пример простой кнопки, при нажатии на которую появляется предупреждение.
x-on
может прослушивать только события с именами в нижнем регистре, поскольку атрибуты HTML нечувствительны к регистру. Написаниеx-on:CLICK
будет прослушивать событие с именемclick
. Если вам нужно прослушивать пользовательское событие с именем camelCase, вы можете использовать помощник.camel
, чтобы обойти это ограничение. Кроме того, вы можете использовать, чтобы прикрепить директиву
x-bind x-on
к элементу в коде javascript (где регистр будет сохранен).
Если x-on:
слишком многословно на ваш вкус, вы можете использовать сокращенный синтаксис: @
.
Здесь тот же компонент, что и выше, но с использованием сокращенного синтаксиса:
Если вы хотите получить доступ к родному объект события JavaScript из вашего выражения, вы можете использовать свойство Alpine magic $event
.
Кроме того, Alpine также передает объект события в любые методы, на которые есть ссылки без замыкающих скобок. Например:
Alpine упрощает прослушивание событий keydown
keyup
для определенных клавиш. Вот пример прослушивания клавиши Enter
внутри элемента ввода.
Вы также можете связать эти ключевые модификаторы для получения более сложных слушателей.
Вот прослушиватель, который запускается, когда удерживается клавиша Shift
и нажимается Enter
, но не когда Enter
нажимается отдельно.
Вы можете напрямую использовать любые действительные имена клавиш, открытые через KeyboardEvent.key
в качестве модификаторов, преобразовав их в кебаб-кейс.
Для удобства ниже приведен список общих ключей, которые вы, возможно, захотите прослушать.
Модификатор | Ключ клавиатуры |
---|---|
.смена | Смена |
.введите | Введите |
.пробел | Космос |
.ctrl | Контроллер |
.cmd | Команда |
.мета | Cmd на Mac, клавиша Windows на Windows |
. alt | Вариант |
.вверх .вниз .влево .вправо | Стрелки вверх/вниз/влево/вправо |
.побег | Побег |
.вкладка | Вкладка |
.Caps-Lock | Caps Lock |
.равно | Равно, = |
.период | Период, . |
косая черта | Косая черта, / |
Прослушиватели событий Alpine представляют собой оболочку для встроенных прослушивателей событий DOM. Следовательно, они могут прослушивать ЛЮБОЕ событие DOM, включая пользовательские события.
Вот пример компонента, который отправляет пользовательское событие DOM и также его прослушивает.
target.dispatchEvent(new CustomEvent('foo', { пузыри: true } ))">...
При нажатии кнопки будет вызван слушатель @foo
.
Поскольку API .dispatchEvent
является подробным, Alpine предлагает $dispatch
помощник для упрощения.
Вот тот же компонент, переписанный с магическим свойством $dispatch
.
< /div>
→ Подробнее о
$dispatch
Alpine предлагает ряд модификаторов директив для настройки поведения прослушивателей событий.
.prevent
.prevent
эквивалентен вызову.preventDefault()
внутри прослушивателя объекта события браузера.
В приведенном выше примере , с
. prevent
нажатие кнопки НЕ отправит форму на конечную точку/foo
. Вместо этого прослушиватель Alpine обработает его и «предотвратит» дальнейшую обработку события..stop
Подобно
.prevent
,.stop
эквивалентно вызову.stopPropagation()
внутри прослушивателя объекта события браузера.
В приведенном выше Например, нажатие кнопки НЕ БУДЕТ регистрировать сообщение. Это потому, что мы немедленно останавливаем распространение события и не позволяем ему «пузыриться» до
с прослушивателем@click
на нем..outside
.outside
— это вспомогательный помощник для прослушивания щелчка за пределами элемента, к которому он прикреплен. Вот простой пример раскрывающегося списка для демонстрации:
< div x-show="open" @click. outside="open = false">
Содержание...
В приведенном выше примере после показа содержимого раскрывающегося списка нажатием кнопки «Переключить» вы можете закрыть раскрывающийся список, щелкнув в любом месте страницы за пределами содержимого.
Это связано с тем, что
.outside
прослушивает клики, которые НЕ исходят от элемента, на котором он зарегистрирован.Стоит отметить, что выражение
.outside
будет оцениваться только тогда, когда элемент, на котором оно зарегистрировано, виден на странице. В противном случае были бы неприятные условия гонки, когда нажатие кнопки «Переключить» также запускало быОбработчик @click.outside
, когда он не виден..window
При наличии модификатора
.window
Alpine зарегистрирует прослушиватель событий в корневом объектеwindow
на странице, а не в самом элементе.escape.window="...">...
Приведенный выше фрагмент будет прослушивать нажатие клавиши «escape» В ЛЮБОМ МЕСТЕ страницы.
Добавление .window
к слушателям чрезвычайно полезно для таких случаев, когда небольшая часть вашей разметки связана с событиями, происходящими на всей странице.
.document
.document
работает аналогично .window
, только он регистрирует слушателей в document
global, вместо window
global.
.once
Добавляя .once
к прослушивателю, вы гарантируете, что обработчик вызывается только ОДИН РАЗ.
.debounce
Иногда бывает полезно «отклонить» обработчик событий так что он вызывается только после определенного периода бездействия (по умолчанию 250 миллисекунд).
Например, если у вас есть поле поиска, которое запускает сетевые запросы по мере того, как пользователь вводит в него данные, добавление функции устранения дребезга предотвратит запуск сетевых запросов при каждом нажатии клавиши.
Теперь, вместо вызова fetchResults
после каждого нажатия клавиши, fetchResults
будет вызываться только после 250 миллисекунд отсутствия нажатия клавиш.
Если вы хотите увеличить или сократить время устранения дребезга, вы можете сделать это, добавив продолжительность после .debounce
модификатор, например:
Теперь fetchResults
будет вызываться только через 500 миллисекунд бездействия.
.throttle
.throttle
аналогичен .debounce
, за исключением того, что вызов обработчика будет выполняться каждые 250 миллисекунд, а не откладываться на неопределенный срок.
Это полезно в случаях, когда могут возникать повторяющиеся и продолжительные события и использование . debounce
не будет работать, потому что вы все еще хотите время от времени обрабатывать событие.
Например:
...
Приведенный выше пример — отличный вариант использования регулирования. Без .throttle
метод handleScroll
будет запускаться сотни раз, пока пользователь прокручивает страницу вниз. Это может сильно замедлить работу сайта. Добавляя .throttle
, мы гарантируем, что handleScroll
вызывается каждые 250 миллисекунд.
Забавный факт: именно эта стратегия используется на этом самом сайте документации для обновления выделенного в данный момент раздела на правой боковой панели.
Как и в случае с .debounce
, вы можете добавить пользовательскую продолжительность для регулируемого события:
window.throttle.750ms="handleScroll">...