В одной из наших предыдущих публикаций в блоге мы говорили о преимуществах безопасности служб шкафчиков компонентов Lightning. В этом сообщении мы рассмотрим простой пример и рассмотрим, как Locker Services применяются к базовым компонентам Lightning-компонентам (компонентам Lightning с пространством имен Lightning), которые Salesforce добавляет в каждую версию.

Давайте рассмотрим пример кода ниже, который использует компонент lightning: input из Salesforce.

Компонент будет выглядеть, как показано ниже, после предварительного просмотра вашего приложения.

Как только вы нажмете кнопку поиска, обратите внимание на эту уродливую ошибку на экране.

Анализируя ошибку, ошибочные строки имеют код Javascript, как показано ниже:

var searchTerm = component.find (‘searchBox’). getElement (). value;

Если вы читаете руководства разработчика компонентов Lightning и знаете, что компоненты поддерживают различные функции и методы, приведенный выше код может показаться совершенно правильным. Возможно, вы много раз использовали функцию find и getElement в элементе DOM, чтобы успешно найти узлы DOM, но тогда почему это проблема здесь?

Теперь давайте изменим код, чтобы использовать наш собственный тег ввода, отличный от тега, предоставленного Salesforce. Давайте изменим код компонента, как показано ниже. Обратите внимание на то, что выделено жирным шрифтом, на котором показаны внесенные нами изменения.

мы добавили наш собственный тег ввода.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
 <aura:attribute name="searchTerm" type="String" />
        <lightning:layout multipleRows="true" horizontalAlign="center" verticalAlign="center">
            <lightning:layoutItem flexibility="auto" size="6">
               <div class="slds-form-element">
                <label class="slds-form-element__label" for="text-input-id-1">
                   Enter search term
                 </label>
                  <div class="slds-form-element__control">
                    <input type="search" id="text-input-id-1" class="slds-input" placeholder="Enter Search Term" aura:id="searchBox"/>
                  </div>
              </div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" size="4" padding="horizontal-small">
                 <lightning:button variant="brand" label="Search" title="" onclick="{! c.handleClick }" />
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-large" size="6">
              <p> You searched for {!v.searchTerm}</p>
            </lightning:layoutItem>
        </lightning:layout>
</aura:component>

Теперь это работает без проблем.

Строки кода var searchTerm = component.find (‘searchBox’). GetElement (). Value теперь действительно работают.

Итак, проблема возникла, когда мы использовали один из стандартных компонентов от salesforce с пространством имен Lightning. Ответ на такое поведение - Salesforce LockerService.

Согласно функции безопасности LockerService нельзя получить доступ к элементам DOM, которые не являются частью компонента. lighnting: input принадлежит пространству имен lightning и, следовательно, служба шкафчика предотвращает доступ компонента к DOM.

Итак, как мы можем сделать это без доступа к входному значению с помощью lightning: input? Обратите внимание, что компоненты в пространстве имен Lightning (базовые компоненты) будут иметь атрибуты и нестандартные события для упрощения множества настраиваемого кода.

Таким образом, мы можем напрямую привязать атрибут к lightning: input и двусторонняя привязка данных, которая из коробки позаботится об этом. Для этого измените код, как показано ниже.

Заключение

Если вы создаете компонент Lightning, используя сочетание готовых базовых компонентов и настраиваемой разметки, помните принципы LockerService, и всегда полезно просматривать документацию по базовым компонентам (обратите внимание, что вы можете получить доступ к новой документации по базовым компонентам, используя URL-адрес Https://developer.salesforce.com/docs/component-library), чтобы узнать об атрибутах и ​​их использовании. Готовые компоненты великолепны, но иногда требования и производительность приложения, необходимого для бизнеса, могут быть достаточно сложными, чтобы принять полностью индивидуальный подход и создать собственное.