Делаем разработку быстрее и менее запутанной
Проблема:
Фреймворк Lightning построен таким образом, что простые повседневные проблемы становятся немного тривиальными и болезненными. Попытка написать код, использующий принцип SoC, становится обузой и кажется почти невозможной.
Решение?
Компоненты помощника! это компоненты многократного использования, которые будут использоваться в нескольких разных местах, прекрасный пример этого - вызов методов вершины, но прежде чем мы перейдем к этому….
Как они работают?
Компоненты служебных программ используют <aura:method> в тандеме с разметкой <aura:attribute> для передачи параметров от компонента к контроллеру JavaScript.
Пример:
<aura:component>
<aura:method name="method" action="{!c.init}">
<aura:attribute name="param1" type="String" />
<aura:attribute name="param2" type="Object" />
</aura:method>
</aura:component>
Сначала объявите нужный параметр с атрибутами aura.
({
init: function(cmp, event) {
var params = event.getParam('arguments');
if (params) {
var param1 = params.param1;
helper.someFunction(param1);
}
}
});
Затем получите аргументы с помощью event.getParam («arguments») и передайте их вспомогательной функции.
getParam возвращает объект, если есть аргументы, или пустой массив, если аргументов нет, используйте getParams, если вы передаете несколько параметров.
({
someFunction: function(param1) {
return param1
}
});
Наконец, сделайте что-нибудь с параметром param.
Некоторые моменты, на которые следует обратить внимание
- aura: метод выполняется синхронно.
- Используйте оператор return, чтобы вернуть значение из синхронного кода JavaScript.
- Код JavaScript, вызывающий действие на стороне сервера, является асинхронным.
- Асинхронный код может продолжить выполнение после его возврата.
- Вы не можете использовать оператор return для возврата результата асинхронного вызова из-за того, что метод aura: возвращает до завершения асинхронного кода.
- Для асинхронного кода используйте обратный вызов или обещание вместо оператора возврата.
Это круто и все такое, но где они полезны?
Рад, что ты спросил! В приведенном ниже примере мы собираемся создать компонент, поэтому вам больше никогда не придется смотреть на документ Вызов действия на стороне сервера!
Во-первых, чтобы иметь возможность вызывать и использовать асинхронные функции, нам нужно рассмотреть несколько вариантов.
- Обратные вызовы
- Обещания
В этом примере мы проходим только обратный вызов, в одной из будущих публикаций я расскажу, как использовать обещания для создания этих компонентов.
Прежде всего нам нужно определить, какие параметры будут использоваться в основной функции. Глядя на отдел продаж, документацию, я знаю, что мне понадобится родительский компонент, метод контроллера, который мы хотим вызвать, параметры для передачи методу и successCallback. Я решил опустить разделы с неполными сведениями и ошибками, так как они вообще не предоставляют реальных отзывов пользователей, и мы можем обработать эту логику в другом месте.
<aura:component>
<aura:method name="CallApexMethod" action="{!c.init}">
<aura:attribute name="component" type="Aura.Component"/>
<aura:attribute name="controllerMethod" type="String" />
<aura:attribute name="actionParameters" type="Object" />
<aura:attribute name="successCallBack" type="Function" />
</aura:method>
</aura:component>
Затем нам нужно создать функцию контроллера, которая вызывается при «init», это очень просто, все, что она делает:
- Используйте getParams.arguments, чтобы получить объект всех параметров
- Разделите каждый параметр на отдельную переменную.
- Вызвать вспомогательный метод, который работает с остальной частью кода
({
init: function (component, event, helper) {
var params = event.getParams().arguments;
var callerComponent = params.component;
var controllerMethod = params.controllerMethod;
var actionParameters = params.actionParameters;
var successCallBack = params.successCallBack;
helper.callApexMethod(callerComponent,controllerMethod,
actionParameters,successCallBack);
}
});
Наконец, нам нужно создать функцию, которая вызывает метод вершины, все, что она делает, это использует параметры из контроллера для создания вашей функции.
({
callApexMethod: function (callerComponent, controllerMethod,
actionParameters, successCallBack) {
action.setParams(actionParameters);
action.setCallback(this, function (res) {
var state = res.getState();
console.log(state);
if (state === "SUCCESS") {
var r = JSON.parse(JSON.stringify(res
.getReturnValue()));
// Calling our callback method
successCallBack(callerComponent, r);
} else if (state === "ERROR") {
var errors = res.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message: " +
errors[0].message);
}
}
} else {
console.log(res);
}
});
$A.enqueueAction(action);
}
});
Так…. Как мне это использовать?
Использовать такой компонент внутри компонента очень просто. Все, что нам нужно сделать, это включить компонент в разметку, присвоить ему идентификатор и передать параметры в Javascript.
Пример:
<aura:component>
<lightning:layout>
Some really cool text
</lightning:layout>
<c:UtilCallApexMethodCmp aura:id="callApexMethod"/>
</aura:component>
После того, как мы включили компонент в нашу разметку, мы можем использовать функцию component.find, чтобы найти компонент и получить доступ к его содержимому.
({
callApexMethod: function(component, event, helper) {
component.find('callApexMethod');
}
});
После того, как вы «нашли» компонент, вы вызываете функцию «callApex» и заполняете ее, как обычную функцию Javascript.
Ниже мы заполняем все наши параметры и вызываем функцию успеха, которая находится в хелпере.
Контроллер:
({
callApexMethod: function(component, event, helper) {
component.find('callApexMethod')
.CallApexMethod(component, 'c.controllerMethod',
{param:'cooool'}, helper.successCallBack);
}
});
Помощник:
({
successCallback: function (component, response) {
component.set('v.milestones', response);
}
});
Заключение
Компоненты Lightning очень полезны при модульном использовании, однако они имеют множество ограничений, которые необходимо устранить, одно из которых позволяет нам использовать чистые файлы JS.
Да, вы можете использовать «статические файлы», но это отстой, и вам придется изо всех сил создавать их.
Мне бы очень хотелось, чтобы они позволили вам создавать файлы javascript, которые можно импортировать в любой компонент, с синтаксисом require(); like.
Спасибо за поддержку!
Если вам понравилась эта история, нажмите 👏 👏 👏
⚠️ Нужна помощь с вашей цифровой стратегией? Заходите на mashdesk.com за бесплатным утешением. ⚠️
