Это $w.Repeater самый популярный элемент на сайтах Wix, который в первую очередь снижает производительность. В этой статье мы рассмотрим, как сделать повторитель быстрее.

Работаю с платформой Velo уже больше года. Элемент $w.Repeater наиболее популярен в наших проектах, это отличный элемент с большим потенциалом гибкости. Мы действительно используем его очень часто.

Но у репитера есть проблема с производительностью. Чем больше мы используем элементов в контейнерах повторителей, тем медленнее он работает. Например, карточки пользователей с контактной информацией:

$w("#repeater1").onItemReady( ($item, itemData, index) => {
    $item("#image1").src = itemData.avatar;
    $item("#firstName").text = itemData.firstName;
    $item("#lastName").text = itemData.lastName;
    $item("#company").text = itemData.compony;
    $item("#phone").text = itemData.phone;
    $item("#email").text = itemData.email;
});

Нам нужно контролировать количество элементов и стараться использовать как можно меньше элементов. Для этого мы рассмотрим использование шаблонов. У этого способа есть ограничение, мы не можем использовать его с интерфейсом коллекций баз данных, мы можем использовать его только с кодом.

Установить Лодаш

Мы будем использовать функцию _.template() из библиотеки Lodash. Сначала нам нужно установить Lodash с помощью Менеджера пакетов.

После установки мы можем использовать Lodash, просто импортируя в свой код.

import _ from "lodash";

Текстовые шаблоны

Теперь мы рассмотрим простой пример, чтобы понять, как работает шаблон.

// #1 install and import
import _ from "lodash";
// #2 Use custom template delimiters.
_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
// #3 Pattern string with two keys
const pattern = "Hello, {{firstName}} {{lastName}}!";
// #4 Create a compiled template.
const compiled = _.template(pattern);
$w.onReady(function () {
// #5 result: "Hello, John Doe!"
$w("#text1").text = compiled({
        firstName: "John",
        lastName: "Doe"
    });
});

Как это работает:

  1. Импорт библиотеки Lodash. Сначала вам нужно установить библиотеку из Диспетчера пакетов.
  2. Установка пользовательских разделителей шаблонов как {{key}} . Lodash использует разделители <%=key%> по умолчанию. "более"
  3. Строка шаблона с двумя ключами {{firstName}} и {{lastName}} .
  4. Создавая скомпилированный шаблон, он возвращает функцию compiled() которой будет передан объект со свойствами. {firstName:"John",lastName:"Doe"} .
  5. Функция compiled() получает объект и возвращает строку с замененными ключами на значение свойств объекта. Результат "Hello, John Doe!" .

HTML-шаблоны

Мы можем получить HTML-контент текстового элемента по свойству .html. $w.текст

const value = $w("#textTemplate").html; // "<b>Bold Text</b>"

Это означает, что мы можем получить HTML текстовых элементов со всеми их стилями! Круто, почему бы нам не использовать его как шаблон…

Мы создали нужный текстовый шаблон с разметкой, стилями и ключами, куда хотим передать параметры. Затем скрываем текстовый элемент на панели свойств «Скрытый при загрузке».

В контейнере повторителя мы оставляем только два элемента #image1 и #text1.

Нам нужно только изменить HTML элементов #text1 в контейнерах повторителей на HTML элемента шаблона #textTemplate.

import _ from "lodash";
_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
$w.onReady(function () {
    // Create a compiled template
    const compiled = _.template( $w("#textTemplate").html );
$w("#repeater1").onItemReady( ($item, itemData, index) => {
        $item("#image1").src = itemData.avatar;
        $item("#text1").html = compiled(itemData); // use template
    });
// set repeater data
    $w("#repeater1").data = [ /* here are our users */ ];
});

Теперь это работает быстрее, потому что у нас есть только два элемента в повторителе: одно изображение и один текстовый элемент. ДЕМО

Ресурсы