При работе с вёрсткой традиционных HTML страниц jQuery используется повсеместно. Эта библиотека позволяет существенно упростить работу с JavaScript. Многие традиционные подходы для взаимодействия со страницей значительно оптимизированы. Благодаря использованию jQuery помимо сокращения количества кода, зачастую увеличивается и производительность. Также библиотека обеспечивает поддержку старых браузеров. Благодаря этим качествам jQuery очень популярна среди разработчиков. В том числе тех кто переходит на работу в сфере Salesforce. К тому же, благодаря большой популярности, в Сети содержится очень большое количество готовых решений и реализаций на базе jQuery.
В нашем блоге мы обсуждаем основные аспекты использования jQuery в Lightning компонентах, в частности, совместимость с Lightning Locker Service.
Мы не можем использовать онлайн-библиотеки JavaScript в компонентах Lightning, но мы можем включить jQuery в качестве статического ресурса с помощью тега ltng: require:
<ltng:require scripts="{!$Resource.jquery331min}" afterScriptsLoaded="{!c.jqueryRun}"/>
Давайте попробуем использовать обычные селекторы jQuery в простой компоненте Lightning, чтобы проверить не блокируется ли стандартный функционал jQuery Лайтнинг компонентой, в частности Lightning Locker Service.
QueryTesting.cmp
<aura:component description="jQueryTesting">
<ltng:require scripts="{! $Resource.jquery331min} " afterScriptsLoaded="{! c.jqueryRun }"/>
<p>First paragraph</p>
<p>Second paragraph</p>
<lightning:button label="Click me" variant="brand" onclick="{! c.buttonHandler }"/>
</aura:component>
jQueryTestingController.js:
({
jqueryRun: function (component, event, helper) {
$("document").ready(function(){
console.log('ready is run ');
});
},buttonHandler: function (component, event, helper) {
console.log('button is pressed');
var $firstP = $("p:first").text();var $lastP = $("p:last").text();
console.log('p: ',firstP); //input: “p: Hello, I'm here!”
console.log('p: ',lastP); //input: “p: Second paragraph”
},
})
jQuery получает информацию со страницы, селекторы и простые функции, такие как «hide ()» работают отлично.
Теперь добавим пару новых элементов:
<aura:attribute name="inputValue" type="String"/>
<p class="slds-m-around--small">{! 'inputValue: ' + inputValue}</p>
<input title="Just input" value="{! v.inputValue}"/>
<lightning:input label="lightning input" value="{! v.inputValue}"/>
И попробуем изменить атрибуты в HTML тегах при помощи метода “attr()”.
$(input).attr({
placeholder: 'Please enter the valid value'
});
Данная функция хорошо подходит для компонент input, но, если вы попробуете изменить атрибут на “lightning: input”, то данная логика работать не будет.
jQuery не поддерживает lightning компоненты. Конечно, в последнем случае, вы можете воспользоваться стандартной кнопкой с подходящим стилем SLDS (Salesforce Lightning Design System), но я считаю, использование lightning компонент более рациональным подходом.
В Visualforce, пользуется популярностью плагин jQuery Data Tables, так как позволяет создавать таблицы, написав только одну строку кода.
Давайте посмотрим как это работает в Lightning. Сначала создадим новые статические ресурсы с плагином jQuery Data Tables и добавим в его тег tng:require:
<ltng:require styles="{! $Resource.datatable + '/DataTables-1.10.16/media/css/jquery.dataTables.min.css'}"
scripts="{!join(',', $Resource.jquery331min , $Resource.datatable + '/DataTables-1.10.16/media/js/jquery.dataTables.min.js')
}"afterScriptsLoaded="{!c.jqueryRun}"/>
Затем изменим нашу страницу, чтобы загрузить массив аккаунтов. Создаем Apex класс jQueryTestingController:
public with sharing class jQueryTestingController {
@AuraEnabled
public static List<Account> getAccounts() {
List<Account> accounts = [
SELECT Id,
Name,
CreatedDate,
Type
FROM Account
];
return accounts;
}
}
И добавляем простой init метод в наш контролер:
init: function (component, event, helper) {
var action = component.get('c.getAccounts');
action.setCallback(this, $A.getCallback(function (response) {
var state = response.getState();
if (state === "SUCCESS") {
component.set("v.accounts", response.getReturnValue());
}
else if (state === "INCOMPLETE") {
console.log('Status incomplete');
}
else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors.length > 0) {
for (var i = 0; i < errors.length; i++) {
if (errors[0].pageErrors) {
if (errors[0].pageErrors.length > 0) {
for (var j = 0; j < errors[i].pageErrors.length; j++) {
console.log('Internal server error: ' + errors[i].pageErrors[j].message);
}
}
}
console.log(errors[i].message);
}
}
}
else {
console.log('Internal server error');
}
}
}));
$A.enqueueAction(action);
},
Теперь давайте изменим нашу страницу. Добавьте простую HTML-страницу с имеющимися аккаунтами:
<table id="tableId" class="slds-table slds-table_bordered slds-table_cell-buffer" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Created Date</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accounts}" var="acc">
<tr>
<td>{!acc.Name}</td>
<td>{!acc.Type}</td>
<td>{!acc.CreatedDate}</td>
</tr>
</aura:iteration>
</tbody>
</table>
Перезагрузите страницу и увидите обычную таблицу SLDS:
Как насчет того, чтобы добавить немного функционала? Для этого используем наш новый плагин.
Для изменения таблицы используем функцию:
$('#tableId').DataTable();
Обновите страницу и пользуйтесь новой таблицей данных с возможностями поиска, сортировки и пагинации.
Все функции нашей таблицы работают отлично. Однако, не стоит забывать о главной проблеме — методы jQuery для взаимодействия с DOM не соответствуют стандартам безопасности Lightning. Если вы собираетесь использовать компоненты Lightning в Managed Package, избегайте использования jQuery в контроллере и хелпере компоненты. Чтобы избежать проблем с проверкой безопасности (Security Review), вы должны использовать jQuery только в рендере компоненты.
У Вас остались вопросы? Свяжитесь с экспертами JET BI
