Обновление содержимого шагов

В библиотеке Shepherd.js каждый шаг (step) создаётся как объект с набором параметров, определяющих его поведение, позиционирование и контент. Контент шага задаётся через свойство text, которое может быть строкой, функцией или HTML-разметкой. В процессе работы приложения возникает необходимость динамического обновления содержимого шага без пересоздания всего тура.

Методы изменения контента

1. Метод updateStepOptions

Shepherd.js предоставляет метод updateStepOptions, который позволяет изменить параметры уже существующего шага. Этот метод принимает объект с новыми настройками:

tour.getCurrentStep().updateStepOptions({
  text: "Обновлённый текст для текущего шага",
  classes: "shepherd-theme-arrows custom-class"
});
  • text – новый контент шага. Может быть строкой или функцией, возвращающей строку.
  • classes – список CSS-классов, позволяющий динамически менять стили шага.
  • Любые другие параметры шага, такие как attachTo, buttons, также могут быть изменены через этот метод.

2. Динамическая генерация контента через функции

Свойство text может быть функцией, которая возвращает строку. Это удобно для создания шагов с контентом, зависящим от состояния приложения:

tour.addStep({
  id: "dynamic-step",
  text: () => `Текущее значение счётчика: ${counter}`,
  attachTo: { element: "#counter", on: "bottom" }
});

При каждом открытии шага функция вызывается заново, что позволяет отображать актуальную информацию без дополнительных вызовов updateStepOptions.

Обновление кнопок и действий

Помимо текста, часто возникает потребность изменить кнопки шага. Для этого используется тот же метод updateStepOptions:

tour.getCurrentStep().updateStepOptions({
  buttons: [
    {
      text: "Назад",
      action: tour.back
    },
    {
      text: "Далее",
      action: () => {
        counter += 1;
        tour.next();
      }
    }
  ]
});

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

Перерисовка шага

После обновления контента иногда необходимо вызвать метод show() для перерисовки шага:

const step = tour.getCurrentStep();
step.updateStepOptions({ text: "Новый контент" });
step.show();

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

Использование событий для динамического контента

Shepherd.js поддерживает события шагов: show, hide, complete и другие. Можно использовать событие show для динамического обновления текста и кнопок перед отображением шага:

tour.addStep({
  id: "event-step",
  text: "Инициализация...",
  attachTo: { element: "#element", on: "right" },
  when: {
    show: function() {
      this.updateStepOptions({
        text: `Обновлённый текст: счётчик = ${counter}`
      });
    }
  }
});
  • this внутри обработчика ссылается на текущий шаг.
  • События позволяют синхронизировать шаг с состоянием приложения без внешнего вмешательства.

Динамическое изменение позиции и привязки

Содержимое шага может требовать изменения позиции или элемента, к которому он привязан. Для этого также используется updateStepOptions:

step.updateStepOptions({
  attachTo: { element: "#new-element", on: "top" }
});
step.show();
  • element – новый DOM-элемент для привязки шага.
  • on – сторона, относительно которой шаг будет позиционироваться (top, bottom, left, right).

Практические рекомендации

  • Использовать updateStepOptions для небольших изменений текста и кнопок, чтобы избежать полного пересоздания шага.
  • Для динамического контента лучше применять функции в text, что снижает количество вызовов обновления.
  • События show и before-show позволяют синхронизировать шаг с состоянием интерфейса в момент его отображения.
  • При изменении позиции или элементов привязки всегда вызывать show(), чтобы корректно перерисовать шаг на экране.
  • Избегать частых вызовов updateStepOptions без необходимости, так как это может влиять на производительность при большом количестве шагов.

Примеры комплексного обновления

const step = tour.getCurrentStep();
step.updateStepOptions({
  text: () => `Текущее состояние: ${state.value}`,
  buttons: [
    {
      text: "Обновить",
      action: () => {
        state.value += 1;
        step.updateStepOptions({ text: `Текущее состояние: ${state.value}` });
      }
    },
    { text: "Закрыть", action: step.hide }
  ],
  classes: "shepherd-theme-arrows updated-step"
});
step.show();

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

Оглавление